在不触发该事件处理程序的情况下执行 javascript 事件答案

【问题标题】：performing a javascript event without triggering that event handler在不触发该事件处理程序的情况下执行 javascript 事件
【发布时间】：2012-10-25 22:56:39
【问题描述】：

在我的最新代码中，我在 textarea 上有一个 focus 的事件处理程序。当用户点击 textarea 时，会触发该事件处理程序，它会根据选定的 textarea 设置一些其他 DOM 状态。但是，在我的程序的其他地方，我想以编程方式设置 textarea 的 focus 而不触发该事件处理程序。例如，我知道 Backbone 可以通过 silently 执行操作。

我唯一的伪解决方案是临时设置一个变量：

var silence = true;

然后，在我的事件处理程序中，仅当静音为假时才执行逻辑。处理程序仍然被触发，但逻辑没有运行。

还有其他人知道更好的策略吗？

【问题讨论】：

你用什么来绑定事件，jQuery？
我实际上在这个特定项目中使用 Meteor github.com/meteor/meteor，所以我主要对 vanilla JS 解决方案感兴趣，但 jQuery 也很好。

标签： javascript events event-handling

【解决方案1】：

你可以暂时unbind()这个活动，像这样：

您有以下处理焦点事件的场景：

function focus_handler() {
   //focus handler code
   ...
   ...
}

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

现在在您希望以编程方式聚焦元素而不触发事件处理程序的代码部分：

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

【讨论】：

如果在侦听器未绑定时发生了已发出的事件，则可能会导致递归循环。因此，我目前在使用 bootstrap-datetimepicker 时遇到了问题。

【解决方案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>

当事件处理程序的b 参数存在时，通过调用$('#input').trigger('focus', jQuery.Event("focus")); 触发事件。所以你可以让你的处理函数根据正常焦点或强制焦点执行。

【讨论】：

非常优雅的解决方案，我喜欢！
没有记录？这是api.jquery.com/trigger 中extraParameters 的使用。为什么不简单地传递true 而不是奇怪的jQuery.Event("focus")？
这行不通。当用户操作发生实际焦点事件时会发生什么？未调用处理程序。

【解决方案3】：

在 jQuery 中，trigger() 可以采用事件命名空间。只有与此命名空间绑定的事件和默认行为才会被触发。

例如：

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

应该可以解决问题（前提是没有人使用“anyOldNonsense”作为事件命名空间）。

编辑：这在 1.7.2 和 1.8.3 中有效，但在 1.9 之后有一个 known bug 用于将数据和命名空间添加到“焦点”事件。

【讨论】：

【解决方案4】：

由于您无法阻止事件发生，因此您需要某种中介来决定是否发出事件。所以你会让中介监听所有焦点事件，你必须告诉中介是否重新发出事件。然后你会在那个中介而不是直接在 dom 节点上监听。

【讨论】：

【解决方案5】：

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

试试这个 hack 来设置带有参数的 onClick 函数，而不是在实例化时触发它们。

【讨论】：