I am trying to basically disable the click event on a <div> temporarily.
I have tried the following (preview):
$('hello').observe('click', function (e) {
e.stop();
});
$('hello').observe('click', function (e) {
alert('click not stopped!');
});
However, when #hello is clicked, the alert box still appears. I do not want the second attached handler to be called, and I do not want to change the second handler.
I will also accept a solution such as:
$('hello').observe('click', function (e) {
alert('click not stopped!');
});
$('hello').disableEvent('click');
// Now, handler won't be called
$('hello').observe('click', function (e) {
alert('click not stopped (2)!');
});
// New handler won't be called, either
$('hello').enableEvent('click');
// Now, handler will be called
I am using the Prototype.js framework. This doesn't seem to be a browser-specific issue.
When you assign handlers to events; you are basically just storing a set of functions to be executed when an event fires.
When an event fires, the handlers you've added are executed in the order they we're added. So if you we're to add three handlers to a div's click-event:
$("div").observe("click", function ()
{
alert("one");
});
$("div").observe("click", function ()
{
alert("two");
});
$("div").observe("click", function ()
{
alert("three");
});
.. you would get three alerts ("one", "two" and "three") when the click event of the div element fires. Those three alerts will still get shown, if you put in:
$("div").observe("click", function (e)
{
e.stop();
})
.. because you are only canceling the event for one particular handler. Not all associated handlers.
So what you will need to do is use a reference variable, which keeps track of wether the click event is allowed to fire:
var cancelClickEvent = true;
$("div").observe("click", function ()
{
// if cancelClickEvent is true, return the function early, to
// stop the code underneath from getting executed
if (cancelClickEvent) return;
// your code goes here
});
You will then need to implement the above if-clause in all your handlers.
Can't you just set the object's disabled property to true?
As I said in comments to roosteronacid's answer, I wrote an extension to Event.observe. Works in most browsers, but not IE.
// XXX HACK XXX
(function () {
var handlerCache = $A([ ]);
function findHandler(either) {
var pair = handlerCache.find(function (pair) {
return $A(pair).member(either);
});
return pair && pair[0];
}
function addHandler(handler) {
function newHandler(e) {
if (!e.halted) {
handler.apply(this, arguments);
}
}
handlerCache.push([ handler, newHandler ]);
return newHandler;
}
Event.observe = Event.observe.extended(function ($super, element, eventName, handler) {
handler = findHandler(handler) || addHandler(handler);
$super(element, eventName, handler);
});
Event.stopObserving = Event.stopObserving.extended(function ($super, element, eventName, handler) {
handler = findHandler(handler) || handler;
$super(element, eventName, handler);
});
Element.addMethods({
observe: Event.observe
});
Event.prototype.halt = function () {
this.halted = true;
};
}());
Note: Function.prototype.extended is a custom function which puts the original Event.observe in as $super.
Related
Javascript newbie here.
Is there a "best practice" for placement of "if" statements in event delegation?
Context
I'm setting up event listeners using vanilla Javascript (I know jQuery etc. would simplify things, but let's stick to vanilla JS): there's an event listener on the parent element that invokes a function when a child is clicked. In our example, that function to-be-invoked lives elsewhere in the code.
Let's say I only want to take action when element with id=child-element is clicked. To do this, I use an "if" statement.
There are two obvious places I can put the if statement:
Within the event listener
Within the function
Question
Is (1) or (2) preferred? If so, why? ("Better memory management", "code is easier to read", etc.)
Example 1
var foo = {
bindEvent: function () {
document.getElementById('clickableElement').addEventListener('click', function (e) {
const clickTarget = e.target.id
if (clickTarget === 'child-element') {
foo.takeAnAction.bind(foo);
foo.takeAnAction();
};
});
},
takeAnAction: function () {
console.log('Click');
},
};
Example 2
var foo = {
bindEvent: function () {
document.getElementById("clickableElement").addEventListener("click",
foo.takeAnAction.bind(foo));
},
takeAnAction: function(e) {
if (e.target.id === "child-element") {
console.log('click');
};
},
};
Thanks!
I would go with option 1. The reason is that you can easily generalise it to handle any event delegation, so it's reusable. Sample:
var foo = {
bindEvent: function (selector, callback) { //accept a selector to filter with
document.getElementById('clickableElement').addEventListener('click', function (e) {
const clickTarget = e.target; //take the element
// check if the original target matches the selector
if (target.matches(selector)) {
takeAnAction.call(foo);
};
});
},
takeAnAction: function () {
console.log('Click');
},
};
foo.bindEvent("#child-element", foo.takeAction);
Now you can produce any amount of delegated event bindings. Adding another delegated binding is as simple as:
foo.bindEvent("#parent-element", foo.takeAction);
foo.bindEvent(".table-of-content", foo.takeAction);
With option 2, you will not need to change the implementation or produce new functions for each case:
/*... */
takeAnAction: function(event) {
if (event.target.id === "child-element") {
console.log('click');
};
},
takeAnActionForParent: function(event) {
if (event.target.id === "parent-element") {
console.log('click');
};
},
takeAnActionOnTableOfContentItems: function(event) {
if (event.target.classList.contains("table-of-content") {
console.log('click');
};
},
If you need to execute the same logic in each case, there is really no need to add a new function for every single case. So, for maintainability point of view, adding the logic in the event listener that would call another function is simpler to manage than producing different functions to be called.
I want the events click and touchstart to trigger a function.
Of course this is simple with JQuery. $('#id').on('click touchstart', function{...});
But then once that event is triggered, I want that same handler to do something else when the events are triggered,
and then later, I want to go back to the original handling function.
It seems like there must be a cleaner way to do this than using $('#id').off('click touchstart'); and then re-applying the handler.
How should I be doing this?
You can create a counter variable in some construct in your javascript code that allows you to decide how you want to handle your event.
$(function() {
var trackClicks = (function() {
var clicks = true;
var getClicks = function() {
return clicks;
};
var eventClick = function() {
clicks = !clicks;
};
return {
getClicks: getClicks,
eventClicks: eventClicks
}
})();
$('#id').on('click touchstart', function {
if (trackClicks.getClicks()) {
handler1();
} else {
handler2();
}
trackClicks.eventClick();
});
function handler1() { //firsthandler};
function handler2() { //secondhandler};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The way I would do this is by creating a couple of functions for the handler function to call based on certain flags. Sudo code would be something like this:
function beginning_action() {
...
}
function middle() {
...
}
var beginning_state = true;
$('#id').on('click touchstart', function{
if(beginning_state) {
beginning_action();
} else {
middle();
}
});
Then all you need to do is change the variable beginning_state to change which function is called. Of course you would give them better names that describe what they do and not when they do it.
Additionally, if you want the handler to call more than two functions you can change the beginning_state variable from a boolean to an int and check it's value to determine which function to call.
Good luck!
I have a non-jquery script with an addEventListener on a buttonclick. This works fine the first run but I want it to change "sendingurl" to some other value after the first click. (the succesfull insert of form becomes an update form). However, even though sendingurl fills with the new id value, it doesnt change after the event is fired again. Instead by the second click it fires the newly created event tohether with the old one with the old value.
The resulting values in console.log:
1st click: event "click" is fired with url: input.php
2nd click:
event "click" is fired with url: input.php
event "click" is fired with url: update.php?io=items&id=693
So I want to get rid of the input being triggered after the first click. Does someone know how to solve this?
var itemid = getHash();
ini(prepare); // using window.onload to execute
function prepare() {
if (itemid) {
// update
var sendingurl = 'update.php?io=items&id=' + itemid;
} else {
// input
var sendingurl = 'input.php';
}
// submitevent
æ($("submitBtn"), 'click', function() {
console.log("event \"click\" is fired with url: " + sendingurl);
var json = new FormData(document.forms[0]);
ajax(sendingurl, json, submittedInput);
});
}
// callback function after ajax did his magic
function submittedInput(response) {
if (response) {
if (!itemid) {
itemid = response;
prepare();
}
} else {
$("status").innerHTML = "something went wrong with the input";
}
}
// function to add events without the use of jquery or prototype
function æ(el, evType, fn, useCapture) {
if (el.addEventListener) {
el.removeEventListener(evType, fn, useCapture);
el.addEventListener(evType, fn, useCapture);
return true;
} else if (el.attachEvent) {
el.detachEvent('on' + evType, fn);
var r = el.attachEvent('on' + evType, fn);
return r;
} else {
el['on' + evType] = fn;
}
}
The first time through, there is no event handler to remove and your anonymous function is added as an event handler. The anonymous function creates as closure, so the value of sendingurl is now "constant" no matter how the external sendingurl changes. That is why you are getting the old value.
The second time through, the event handler function being passed to removeEventListener is not yet tied to an event because the second anonymous function is not the same function as the anonymous function on the first pass. So no event handler is removed. You then add a second event with the new anonymous function with the revised value of sendingurl. That is why you are seeing both functions fire.
Convert your anonymous function to a normal function and use the normal function name instead.
I have a block of code like so:
function doSomething() {
someVar.on("event_name", function() {
$('#elementId').click(function(e) {
doSomething();
});
});
}
// and on document ready
$(function () {
$('#anotherElemId').click(function () {
doSomething();
});
});
The problem that I'm encountering is that when I call doSomething() from anotherElemId click event(that is binded on document ready) it works as expected, but calling it recursively from elementId click doesn't work.
Any ideas? Thinking is something trivial that I'm missing.
Is someVar an actual jQuery reference to a dom element? (e.g. $('#someitem'))
The second problem is you cant put a .click event inside a function that you would like to instantiate later on. If you are trying to only allow #elementId to have a click event AFTER some previous event, try testing if a tester variable is true:
var activated = false;
$(function () {
$('#anotherElemId').click(function () {
activated = true;
});
$('#secondElemId').on("event_name", function() {
if (activated) {
// code that happens only after #anotherElemId was clicked.
}
});
});
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Removing an anonymous event listener
I have the following cross browser function to add an event listener:
_SU3.addEventListener = function(elem, eventName, fn) {
if(elem.addEventListener ) {
elem.addEventListener(eventName, fn, false);
} else if (elem.attachEvent) {
elem.attachEvent('on'+eventName, fn);
}
};
I'm adding the listener like this:
_SU3.addEventListener(_show, "click", function(event) {
_SU3.getChildren(_show, uri, element);
});
Which is all fine. However I want to remove the listener after it has been called once. I.e. something like:
_SU3.getChildren = function(_show, url, element) {
... blah...
_SU3.removeEventListener(_show, 'click', ANON_FUNCTION);
};
But of course the listener function is anonymous so there's no function name to reference.
How can I remove the listener?
You need to keep a reference to the function:
var foo = function(event) { _SU3.getChildren(_show, uri, element); };
_SU3.addEventListener(_show, "click", foo);
...
_SU3.getChildren = function(_show, url, element) {
... blah...
_SU3.removeEventListener(_show, 'click', foo);
};
Make sure that the variable foo is in the scope of where you remove the event listener.
You can't. If you want to remove it, you have to store a reference to it. How else would you be able to distinguish it from the others?
Instead of removing the event listener, arrange for it to keep track of whether it's been called:
addOneShotListener = function(elem, eventName, fn) {
var triggered = false, handler = function(ev) {
if (triggered) return;
fn(ev);
triggered = true;
};
if(elem.addEventListener ) {
elem.addEventListener(eventName, handler, false);
} else if (elem.attachEvent) {
elem.attachEvent('on'+eventName, handler);
}
};
That variation on your original function just wraps the original handler (the "fn" passed in) with a function that only calls the handler the first time it is invoked. After that, it sets a flag and won't ever call the original handler function again.
If you only have one click event assigned at any one time to an element, why not set the onclick property? You can remove it anytime with element.onclick='';