仅在单击元素后将单击处理程序绑定到正文

Posted

技术标签:

【中文标题】仅在单击元素后将单击处理程序绑定到正文【英文标题】:bind click handler to body only after click on element 【发布时间】:2012-06-26 15:49:43 【问题描述】:

我有一个关于 jquery 的概念性问题。我有这个小提琴

http://jsfiddle.net/zvCrN/

我想做的是: 将点击处理程序绑定到链接。 单击链接以显示警报。 只有在这种情况发生后,才将单击事件处理程序绑定到正文,以便单击正文中的任何位置都会显示不同的警报。

我确定这是微不足道的,我就是无法理解它。如何将处理程序绑定到正文,这样它也不会在链接点击时触发?

任何帮助表示赞赏,

【问题讨论】:

我不确定是什么阻碍了您。那是传播吗?如果是这样,请在链接的点击处理程序中添加event.stopPropagation() 【参考方案1】:
$("#infolink").click(function(e) 
    e.stopPropagation();
    alert('link')
);

$('body, :not("#infolink")').click(function() 
    alert('body');
);

DEMO

【讨论】:

你的例子把我推向了正确的方向。 jsfiddle.net/shQVC 。但我希望有一个比使用布尔信号量更优雅的解决方案来显示这种因果关系。【参考方案2】:

尝试以下方法:

var link = $('#infolink');
var handler = function (event) 
  link.off('click', handler);
  event.stopPropagation();
  $('body').on('click', function (event) 
    alert('some other message');
  );
  alert('some message');
;
link.on('click', handler);

【讨论】:

你的代码和我的完全一样。我希望只有在链接已经发生时才会发生身体警报。 @glasspill 在我的示例中,处理程序仅在#infolink 的单击事件中附加到主体。这给出了您要求的行为。 感谢您的回答,但我想我需要重新表述我的问题:我不希望在第一次点击链接时触发正文警报。

以上是关于仅在单击元素后将单击处理程序绑定到正文的主要内容,如果未能解决你的问题,请参考以下文章

将单击绑定到 panzoom 容器中的元素

06 同时给多个元素绑定事件

单击“a”元素时,触发它的悬停处理程序,而不是转到链接

jQuery 仅在 DOM 中单击时查找下一个表单元素

渲染组件后,Vue.js将单击事件绑定到v-html中的锚元素[重复]

如何在 vuejs 中隔离父元素和子元素之间的单击事件处理程序