首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >单击事件函数执行两次

单击事件函数执行两次
EN

Stack Overflow用户
提问于 2016-01-23 06:36:27
回答 2查看 267关注 0票数 3

我对这段代码的结果感到困惑。在我看来,当$("#title")的内容是"hello“并得到单击时,它执行函数saygoodbye()并添加一个新的单击事件匿名函数。它会发出外部警报。当内容是“再见”并点击时,这两个函数都应该执行。它应该得到一个外部警报和一个内部警报。

但实际上,我得到了一个外部警报和两个内部警报。另一个内部警报从哪里来?

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var count = 0;
function saygoodbye(){
  alert("ok is outer");
  $("#title").html("goodbye");
  $("#title").click(function() {
    alert("ok is inner");
    $('#title').html("hello");
    $('#title').off("click");
  });
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="//code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>

<h1 id="title" onclick="saygoodbye();">hello</h1>

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-01-23 06:42:13

  1. 当你第一次点击,“说再见”运行,发布“外部”警报,并建立一个点击处理程序。
  2. 第二次点击,“说再见”再次运行,张贴“外部”,并建立又一个点击手。
  3. 该“单击”事件随后由jQuery处理,此时,该事件有两个“单击”处理程序来调用。

当您调用.click()时,您总是要添加一个新的处理程序;以前添加的处理程序不会被删除。当您调用.off()时,它们将被删除,但这在两个处理程序已经附加之后才会发生。库(jQuery )维护处理程序列表,并使用自己的内部事件处理程序从浏览器实际处理事件。因此,即使只有两个真正的“单击”事件,当调用jQuery处理程序时,有两个jQuery注册的处理程序供库调用。

通常,在其他事件处理程序中添加事件处理程序是一种值得怀疑的方法。这并不是完全错误的,但它增加了复杂性。在这里,在此之上,您使用了两种不同的技术来注册事件处理程序。“送别”函数附加到DOM元素的"onclick“属性。然而,jQuery代码使用DOM attachEventHandler()注册处理程序。这两种机制是分开的。当发生“单击”时,浏览器将首先检查"onclick“属性,然后调用通过API注册的任何处理程序。

票数 5
EN

Stack Overflow用户

发布于 2016-01-23 07:17:38

这是因为事件是从DOM注册的。动态注册它,然后它工作。

从标记中删除onclick属性。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var count = 0;

$('#title').click(saygoodbye);

function saygoodbye(){
  alert("ok is outer");
  $("#title").html("goodbye");
  $("#title").click(function() {
    alert("ok is inner");
    $('#title').html("hello");
    $('#title').off("click");
  });
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="//code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<h1 id="title">hello</h1>

阅读这样的线程,了解为什么要在执行过程中注册事件(就您的情况而言)。jQuery.click() vs onClick

编辑:

首先,为了解除通过元素属性触发的事件的绑定,我们需要使用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
document.getElementById("title").onclick = null;

其次,jQuery的.off()函数将只解除jQuery的.on()添加的处理程序

http://api.jquery.com/off/文档

  • “.off()方法移除附加于.on()的事件处理程序”
  • .click() -是.on()的一种速记方法。

所以说再见()并没有逃脱,这是调试。

点击标题。(有标题你好)

  1. 称再见功能警报为“外部”;
  2. 将html更改为“再见”分配
  3. 标题的新匿名处理程序(单击事件)。

单击标题(有标题再见)

  1. 叫再见函数
  2. 警告“外部”;
  3. 将html更改为“再见”(是的,它又变了)
  4. 将另一个事件匿名处理程序分配给title (参见附加的另一个处理程序)
  5. 呼叫匿名处理程序1
  6. 警惕“内在”
  7. 尽管在此阶段(指定了.off()函数)。这将只在触发所有事件时执行);
  8. 呼叫匿名处理程序2
  9. 警惕“内在”
  10. .off()函数在这里工作,并杀死额外添加的2个处理程序。

希望这个故障能帮上忙。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34964755

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文