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

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

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

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

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


#1楼

这是这里的报价

Event.preventDefault

preventDefault方法可防止事件执行其默认功能。 例如,您可以在A元素上使用preventDefault来停止单击该元素以退出当前页面:

//clicking the link will *not* allow the user to leave the page 
myChildElement.onclick = function(e) { 
    e.preventDefault(); 
    console.log('brick me!'); 
};

//clicking the parent node will run the following console statement because event propagation occurs
logo.parentNode.onclick = function(e) { 
    console.log('you bricked my child!'); 
};

虽然元素的默认功能是固定的,但事件继续使DOM冒泡。

Event.stopPropagation

第二种方法stopPropagation允许事件的默认功能发生,但阻止事件传播:

//clicking the element will allow the default action to occur but propagation will be stopped...
myChildElement.onclick = function(e) { 
    e.stopPropagation();
    console.log('prop stop! no bubbles!'); 
};

//since propagation was stopped by the child element's onClick, this message will never be seen!
myChildElement.parentNode.onclick = function(e) { 
    console.log('you will never see this message!'); 
};

stopPropagation有效地阻止父元素知道其子元素上的给定事件。

虽然简单的停止方法可以使我们快速处理事件,但考虑到冒泡到底要发生什么,这一点很重要。 我敢打赌,开发人员真正想要的只是90%的时间是preventDefault! 错误地“停止”事件可能会导致大量麻烦。 您的插件可能无法正常工作,并且第三方插件可能会变砖。 更糟糕的是,您的代码破坏了网站上的其他功能。


#2楼

术语

来自quirksmode.org :

事件捕捉

使用事件捕获时

\n                |  |\n --------------- |  | -----------------\n |  element1 |  |  |\n |  ----------- |  | ----------- |\n |  | element2 \\ / |  |\n |  ------------------------- |\n |  活动捕获|\n -----------------------------------\n

element1的事件处理程序首先触发,element2的事件处理程序最后触发。

事件冒泡

使用事件冒泡时

\n                / \\\n --------------- |  | -----------------\n |  element1 |  |  |\n |  ----------- |  | ----------- |\n |  | element2 |  |  |  |\n |  ------------------------- |\n |  活动起泡|\n -----------------------------------\n

element2的事件处理程序首先触发,element1的事件处理程序最后触发。

W3C事件模型中发生的任何事件都首先被捕获,直到到达目标元素,然后再次冒泡

\n                  |  |  / \\\n ----------------- |  |-|  | -----------------\n |  element1 |  |  |  |  |\n |  ------------- |  |-|  | ----------- |\n |  | element2 \\ / |  |  |  |\n |  -------------------------------- |\n |  W3C事件模型|\n ------------------------------------------\n

接口

从w3.org进行事件捕获

如果捕获的EventListener希望阻止事件的进一步处理,则可以调用Event接口的stopPropagation方法。 这将阻止事件的进一步分发,尽管在相同层次结构级别注册的其他EventListeners仍将接收该事件。 一旦调用了事件的stopPropagation方法,对该方法的进一步调用将不会产生任何其他效果。 如果不存在其他捕获stopPropagation并且尚未调用stopPropagation ,则事件将在目标本身上触发适当的EventListeners

对于事件冒泡

任何事件处理程序都可以选择通过调用Event接口的stopPropagation方法来防止进一步的事件传播。 如果任何EventListener调用此方法,则将触发当前EventTarget上的所有其他EventListeners ,但气泡将在该级别停止。 只需调用一次stopPropagation即可防止进一步起泡。

对于事件取消

取消是通过调用EventpreventDefault方法来完成的。 如果一个或多个EventListeners在事件流的任何阶段调用preventDefault ,则默认操作将被取消。

例子

在以下示例中,单击Web浏览器中的超链接将触发事件的流程(执行事件监听器)和事件目标的默认操作(打开新选项卡)。

HTML:


JavaScript:

var el = document.getElementById("c");

function capturingOnClick1(ev) {
    el.innerHTML += "DIV event capture
"; } function capturingOnClick2(ev) { el.innerHTML += "A event capture
"; } function bubblingOnClick1(ev) { el.innerHTML += "DIV event bubbling
"; } function bubblingOnClick2(ev) { el.innerHTML += "A event bubbling
"; } // The 3rd parameter useCapture makes the event listener capturing (false by default) document.getElementById("a").addEventListener("click", capturingOnClick1, true); document.getElementById("b").addEventListener("click", capturingOnClick2, true); document.getElementById("a").addEventListener("click", bubblingOnClick1, false); document.getElementById("b").addEventListener("click", bubblingOnClick2, false);

示例1 :它导致输出

DIV event capture
A event capture
A event bubbling
DIV event bubbling

示例2 :向函数添加stopPropagation()

function capturingOnClick1(ev) {
    el.innerHTML += "DIV event capture
"; ev.stopPropagation(); }

结果输出

DIV event capture

事件侦听器阻止了事件的进一步向下和向上传播。 但是,这并没有阻止默认操作(打开新标签页)。

示例3 :向函数添加stopPropagation()

function capturingOnClick2(ev) {
    el.innerHTML += "A event capture
"; ev.stopPropagation(); }

或功能

function bubblingOnClick2(ev) {
    el.innerHTML += "A event bubbling
"; ev.stopPropagation(); }

结果输出

DIV event capture
A event capture
A event bubbling

这是因为两个事件侦听器都注册在同一事件目标上。 事件侦听器阻止了事件的进一步向上传播。 但是,它们并没有阻止默认操作(打开新标签页)。

示例4 :例如,将preventDefault()添加到任何函数

function capturingOnClick1(ev) {
    el.innerHTML += "DIV event capture
"; ev.preventDefault(); }

阻止打开新标签页。


#3楼

event.preventDefault(); 停止发生元素的默认操作。

event.stopPropagation(); 防止事件使DOM树冒泡,从而防止任何父处理程序收到该事件的通知。

例如,如果在DIVFORM内有一个链接了click方法的链接,并且该链接还附加了click方法,则它将阻止触发DIVFORM click方法。


#4楼

返回false;


return false; 调用它时会做3件事:

  1. event.preventDefault() –停止浏览器的默认行为。
  2. event.stopPropagation() –防止事件传播(或“冒泡”)DOM。
  3. 停止回调执行,并在调用后立即返回。

请注意,此行为不同于正常的(非jQuery)事件处理程序,在事件处理程序中,值得注意的是, return false不会阻止事件冒泡。

preventDefault();


preventDefault(); 做一件事:它停止了浏览器的默认行为。

什么时候使用它们?


我们知道它们在做什么,但是什么时候使用它们呢? 简单地说,这取决于您要完成什么。 使用preventDefault(); 如果您想“只是”阻止默认的浏览器行为。 使用return false; 当您要防止默认浏览器行为并防止事件传播DOM时。 在大多数情况下,您将使用return false; 您真正想要的是preventDefault()

例子:


让我们尝试通过示例来理解:

我们将看到纯JAVASCRIPT的示例

范例1:

   

运行上面的代码,现在如果您单击该链接,将立即看到超链接“单击此处访问stackoverflow.com” ,您将获得javascript警报链接单击,然后您将获得javascript警报div单击 ,立即将您重定向到stackoverflow.com。

范例2:

   

运行上面的代码,现在如果您单击该链接,将立即看到超链接“单击此处访问stackoverflow.com”,您将获得javascript警报链接单击,然后您将获得javascript警报div,单击下一步,您将看到超链接“单击此处访问stackoverflow.com,并替换为“阻止单击事件”文本,您将不会重定向到stackoverflow.com。 这是由于> event.preventDefault()方法所致,我们使用该方法来防止触发默认的点击操作。

范例3:

   

这次,如果单击“链接”,将不会调用函数executeParent(),并且不会获得javascript div这次单击的警告。 这是由于我们使用event.stopPropagation()方法阻止了向父div的传播。 接下来,您将看到超链接“单击此处访问stackoverflow.com”,并替换为文本“将要执行Click事件”,然后您将立即重定向到stackoverflow.com。 这是因为我们没有使用event.preventDefault()方法阻止默认的点击操作触发这次。

范例4:

   

如果单击链接,则不会调用函数executeParent(),并且不会收到JavaScript警报。 这是由于我们使用event.stopPropagation()方法阻止了向父div的传播。 接下来,您将看到超链接“单击此处访问stackoverflow.com”,并替换为文本“禁止单击事件”,并且您将不会重定向到stackoverflow.com。 这是因为我们已经使用event.preventDefault()方法阻止了默认的点击操作触发这次。

范例5:

对于return false,我有三个示例,并且它们似乎都在做完全相同的事情(只是返回false),但实际上结果却大不相同。 这是上述每种情况中实际发生的情况。

情况:

  1. 从内联事件处理程序返回false会阻止浏览器导航到链接地址,但不会阻止事件通过DOM传播。
  2. 从jQuery事件处理程序返回false会阻止浏览器导航到链接地址,并且会阻止事件通过DOM传播。
  3. 从常规DOM事件处理程序返回false绝对不会执行任何操作。

将看到所有三个示例。

  1. 内联返回false。

   

  1. 从jQuery事件处理程序返回false

    

  1. 从常规DOM事件处理程序返回false。

   

希望这些例子很清楚。 尝试在html文件中执行所有这些示例,以查看它们如何工作。


#5楼

 $("#but").click(function(event){ console.log("hello"); event.preventDefault(); }); $("#foo").click(function(){ alert("parent click event fired !"); }); 
  


#6楼

Event.preventDefault-停止浏览器默认行为。 现在是什么是浏览器默认行为。 假设您有一个定位标记,并且具有href属性,并且该定位标记嵌套在具有click事件的div标记内。 锚标记的默认行为是在锚标记上单击时应导航,但event.preventDefault所做的是在这种情况下它将停止导航。 但是它永远不会阻止事件的冒泡或事件的升级,即



$('.container').on('click', function(e) {
 console.log('container was clicked');
});

$('.element').on('click', function(e) {
  e.preventDefault(); // Now link won't go anywhere
  console.log('element was clicked');
});

结果将是

“元素被点击”

“单击了容器”

现在event.StopPropation它停止事件冒泡或事件升级。 现在上面的例子

$('.container').on('click', function(e) {
  console.log('container was clicked');
});

$('.element').on('click', function(e) {
  e.preventDefault(); // Now link won't go anywhere
  e.stopPropagation(); // Now the event won't bubble up
 console.log('element was clicked');
});

结果将是

“元素被点击”

有关更多信息,请参阅此链接https://codeplanet.io/preventdefault-vs-stoppropagation-vs-stopimmediatepropagation/


#7楼

stopPropagation阻止事件冒泡事件链。

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

例子

preventDefault

 $("#but").click(function (event) { event.preventDefault() }) $("#foo").click(function () { alert("parent click event fired!") }) 
  

停止传播

 $("#but").click(function (event) { event.stopPropagation() }) $("#foo").click(function () { alert("parent click event fired!") }) 
  

使用stopPropagation ,仅调用button的单击处理程序 ,而div的单击处理程序从不触发。

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

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

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

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

为了支持IE8和更低版本,将stopPropagation替换为cancelBubble ,将preventDefault替换为returnValue

你可能感兴趣的:(javascript,events,preventdefault,stoppropagation)