当前位置: 首页 > 面试题库 >

event.stopPropagation和event.preventDefault有什么区别?

诸葛皓
2023-03-14
问题内容

他们似乎在做同样的事情……
是现代的还是老的?还是不同的浏览器支持它们?

当我自己处理事件(没有框架)时,我总是检查两者并执行(如果存在)。(我也是return false,但我有一种感觉不适用于附带的事件node.addEventListener)。

那么为什么两者都呢?我应该继续检查两者吗?还是实际上有区别?

(我知道,很多问题,但都是相同的=)


问题答案:

stopPropagation 阻止事件冒泡事件链。

preventDefault 阻止浏览器对该事件执行默认操作。

例子

preventDefault

$("#but").click(function (event) {

  event.preventDefault()

})

$("#foo").click(function () {

  alert("parent click event fired!")

})


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="foo">

  <button id="but">button</button>

</div>

停止传播

$("#but").click(function (event) {

  event.stopPropagation()

})

$("#foo").click(function () {

  alert("parent click event fired!")

})


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="foo">

  <button id="but">button</button>

</div>

使用stopPropagation,只有 button 的点击处理程序会被调用,而 div 的点击处理程序永远不会触发。

就像您使用一样preventDefault,只有浏览器的默认操作被停止,但div的单击处理程序仍然会触发。

以下是有关MDN中DOM事件属性和方法的一些文档:

  • event.cancelBubble
  • event.preventDefault()
  • event.returnValue
  • event.stopPropagation()

对于IE9和FF,您可以只使用preventDefault和stopPropagation。

为了支持IE8和更低版本,请替换stopPropagationcancelBubble和替换preventDefaultreturnValue



 类似资料:
  • 问题内容: 两者都意味着空间,但是有什么区别吗? 问题答案: 一个是不间断空间,另一个是常规空间。不间断的空格表示该行不应在该点处换行,就像它不会在一个单词的中间换行一样。 此外,正如斯文德(Svend)在其评论中指出的那样,不间断的空间不会崩溃。

  • 本文向大家介绍<%# %> 和 <% %> 有什么区别?相关面试题,主要包含被问及<%# %> 和 <% %> 有什么区别?时的应答技巧和注意事项,需要的朋友参考一下 答:<%# %>表示绑定的数据源 <%%>是服务器端代码块  

  • 问题内容: 以下代码之间有什么区别: 和 Python建议采用一种做事方式,但有时似乎不止一种。 问题答案: 一个是函数调用,一个是文字: 使用第二种形式。它更具Python风格,并且可能更快(因为它不涉及加载和调用单独的函数)。

  • 发展至今(2020 年 6 月份),GCC 编译器已经更新至 10.1.0 版本,其功能也由最初仅能编译 C 语言,扩增至可以编译多种编程语言,其中就包括 C++ 。 除此之外,当下的 GCC 编译器还支持编译 Go、Objective-C,Objective-C ++,Fortran,Ada,D 和 BRIG(HSAIL)等程序,甚至于 GCC 6 以及之前的版本还支持编译 Java 程序。但本

  • 问题内容: 比较PMD和CheckStyle有一个问题。但是,我找不到关于PMD和FindBugs之间差异/相似性的详尽分类。我相信一个关键的区别是PMD适用于源代码,而FindBugs适用于编译的字节码文件。但是就功能而言,这应该是一个选择,还是两者相辅相成? 问题答案: 我同时使用。我认为他们是相辅相成的。 正如您所说,PMD在源代码上工作,因此会发现诸如以下问题:违反命名约定,缺少花括号,放

  • 问题内容: 我被要求在portlet和门户网站上工作。 我想知道portlet和servlet之间的区别吗? Portlet与Servlet有何不同之处(可能在功能上)? 问题答案: Portlet是JSR-168标准的一部分,该标准规范门户容器和组件。这与Web容器(和Servlet)的标准不同。尽管这两个标准之间肯定有很强的相似之处,但是它们在容器,API,生命周期,配置,部署等方面有所不同。