performing a javascript event without triggering that event handler

Question

In my latest code, I have an event handler for a focus on a textarea. When the user clicks on the textarea, that event-handler is triggered which sets some other DOM states based on the selected textarea. However, elsewhere in my program I want to programmatically set the focus of the textarea without triggering that event handler. I know Backbone, for instance, has a way to silently perform an action.

My only pseudo-solution is to temporarily set a variable:

var silence = true;

And then, in my event handler, only perform the logic if silence is false. The handler is still triggered, but the logic doesn't run.

Does anyone else know of better strategies for this?

• Glenn Slaven: What are you using to bind events, jQuery?
• bento: I'm actually using Meteor github.com/meteor/meteor for this particular project, so I was primarily interested in vanilla JS solutions, but jQuery ones are good, too.

Answer 1

You could temporarily unbind() the event, like this:

You have the following scenario where you handle the focus event:

function focus_handler() {
 //focus handler code
 ...
 ...
}
$('#yourelement').bind('focus', focus_handler);

And now on the part of the code where you want to programmatically focus the element without triggering the event handler:

$('#yourelement').unbind('focus');
$('#yourelement').focus();
$('#yourelement').bind('focus', focus_handler);

• Barry Chapman: If there are emitted events that occur when a listener is unbound it may cause recursion loops. Hence the problem I am currently facing with bootstrap-datetimepicker.

Answer 2

<input type="text" name="input" id="input" value="0">
<input type="text" name="input" id="input2" value="0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
$('#input').focus(function(a,b) {
 if (b) alert('forced');
});
$('#input').trigger('focus', jQuery.Event("focus"));
});
</script>

When b argument of the event handler is present, the event is triggered by invoking $('#input').trigger('focus', jQuery.Event("focus"));. So you can make you handler function execute depending on normal focus or forced focus.

• Glenn Slaven: Very elegant solution, I like it!
• Pierre: Not documented? This is the use of extraParameters in api.jquery.com/trigger. Why not simply passing true instead of weird jQuery.Event("focus")?
• B T: This won't work. What happens when an actual focus event happens from a user action? The handler isn't called.

Answer 3

In jQuery, trigger() can take an event namespace. Only events bound with this namespace, and default behaviour, will be triggered.

So for example:

$('#yourelement').trigger('focus.anyOldNonsense');

should do the trick (provided no-one has used "anyOldNonsense" as an event namespace).

Edit: This works in 1.7.2 and 1.8.3, but there is a known bug in 1.9 onwards for adding data and namespaces to a "focus" event.

Answer 4

Since you can't prevent the event from happening, you need some kind of intermediary that decides whether or not to emit the event. So you would have the intermediary listen for all focus events and you'd have to tell that intermediary whether or not to re-emit the event. Then you'd listen on that intermediary rather than the dom node directly.

Answer 5

<a href='javscript:void()' onClick="()=>myFunction(myParams)">click here</a>

try this hack to set onClick functions with params without firing them on instantiation.