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?

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?

• javascript
• events
• event-handling

• What are you using to bind events, jQuery? – Glenn Slaven Commented Oct 25, 2012 at 23:35
• 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. – bento Commented Oct 26, 2012 at 0:12

5 Answers 5

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);

<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.

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.

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.

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

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