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?

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
– bento, Commented Oct 26, 2012 at 0:12

Nelson Benítez León · Accepted Answer · 2012-10-25 23:33:26Z

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

answered Oct 25, 2012 at 23:33

Nelson Benítez León

51.1k8 gold badges70 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Barry Chapman Over a year ago

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.

Reflective · Accepted Answer · 2012-10-25 23:38:51Z

3

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

answered Oct 25, 2012 at 23:38

Reflective

3,9371 gold badge17 silver badges25 bronze badges

3 Comments

Glenn Slaven Over a year ago

Very elegant solution, I like it!

Pierre Over a year ago

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 Over a year ago

This won't work. What happens when an actual focus event happens from a user action? The handler isn't called.

qcode peter · Accepted Answer · 2013-09-13 14:04:34Z

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.

edited Sep 13, 2013 at 14:04

answered Sep 12, 2013 at 12:16

qcode peter

3263 silver badges8 bronze badges

Comments

B T · Accepted Answer · 2016-10-29 22:57:09Z

0

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.

answered Oct 29, 2016 at 22:57

B T

61.6k36 gold badges200 silver badges213 bronze badges

Comments

tryThat · Accepted Answer · 2016-12-01 08:55:45Z

-1

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

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

answered Dec 1, 2016 at 8:55

tryThat

1

Collectives™ on Stack Overflow

performing a javascript event without triggering that event handler

5 Answers 5

1 Comment

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related