ReactJS SyntheticEvent stopPropagation（）仅适用于React事件吗？（react key 作用）

25-02-17 16

以上就是给各位分享ReactJSSyntheticEventstopPropagation，其中也会对仅适用于React事件吗？进行解释，同时本文还将给你拓展AngularJS阻止事件冒泡$event

以上就是给各位分享ReactJS SyntheticEvent stopPropagation，其中也会对仅适用于React事件吗？进行解释，同时本文还将给你拓展AngularJS阻止事件冒泡$event.stopPropagation()、e.preventDefault()与e.stopPropagation()的区别、event.stopPropagation ()、event.preventDefault () 与 return false 的区别、event.stopPropagation 和 event.preventDefault 有什么区别？等相关知识，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

ReactJS SyntheticEvent stopPropagation（）仅适用于React事件吗？（react key 作用）
AngularJS阻止事件冒泡$event.stopPropagation()
e.preventDefault()与e.stopPropagation()的区别
event.stopPropagation ()、event.preventDefault () 与 return false 的区别
event.stopPropagation 和 event.preventDefault 有什么区别？

ReactJS SyntheticEvent stopPropagation（）仅适用于React事件吗？（react key 作用）

我试图在ReactJS组件中使用event.stopPropagation（）来阻止单击事件冒泡并触发遗留代码中与JQuery关联的click事件，但是似乎React的stopPropagation（）只能停止传播到事件也附加在React中，并且JQuery的stopPropagation（）不会停止传播到随React附加的事件。

有什么方法可以使stopPropagation（）在这些事件中起作用？我编写了一个简单的JSFiddle来演示这些行为：

/** @jsx React.DOM */var Propagation = React.createClass({    alert: function(){        alert(''React Alert'');    },    stopPropagation: function(e){        e.stopPropagation();    },    render: function(){        return (            <div>                <div onClick={this.alert}>                    <a href="#" onClick={this.stopPropagation}>React Stop Propagation on React Event</a>                </div>                <div className="alert">                    <a href="#" onClick={this.stopPropagation}>React Stop Propagation on JQuery Event</a>                </div>                <div onClick={this.alert}>                    <a href="#" className="stop-propagation">JQuery Stop Propagation on React Event</a>                </div>                <div className="alert">                    <a href="#" className="stop-propagation">JQuery Stop Propagation on JQuery Event</a>                </div>            </div>        );    }});React.renderComponent(<Propagation />, document.body);$(function(){        $(document).on(''click'', ''.alert'', function(e){        alert(''Jquery Alert'');    });    $(document).on(''click'', ''.stop-propagation'', function(e){        e.stopPropagation();    });});

答案1

小编典典

React使用事件委派和单个事件侦听器来启动document冒泡的事件，如本例中的“
click”，这意味着无法停止传播；当您在React中与真实事件互动时，真实事件已经传播了。stopPropagation由于React在内部处理合成事件的传播，因此可以对React的合成事件进行处理。

使用下面的修补程序来工作JSFiddle。

在jQuery事件上反应停止传播

使用Event.stopImmediatePropagation以防止你的其他（jQuery的在这种情况下）听众根被调用。IE9
+和现代浏览器都支持它。

stopPropagation: function(e){    e.stopPropagation();    e.nativeEvent.stopImmediatePropagation();},

警告：侦听器按照其绑定的顺序进行调用。必须先将React初始化为其他代码（此处为jQuery），然后才能工作。

jQuery在React事件上停止传播

您的jQuery代码也使用事件委托，这意味着stopPropagation在处理程序中的调用不会停止任何操作。事件已经传播到document，并且React的侦听器将被触发。

// Listener bound to `document`, event delegation$(document).on(''click'', ''.stop-propagation'', function(e){    e.stopPropagation();});

为了防止传播到元素之外，侦听器必须绑定到元素本身：

// Listener bound to `.stop-propagation`, no delegation$(''.stop-propagation'').on(''click'', function(e){    e.stopPropagation();});

编辑（2016/01/14）：
说明了委派只必须用于冒泡的事件。有关事件处理的更多详细信息，React的源代码具有描述性注释：ReactBrowserEventEmitter.js。

AngularJS阻止事件冒泡$event.stopPropagation()

一、在AngularJs中阻止事件冒泡方式

  <span ng-click="func();$event.stopPropagation();"></span>

或者

<buttonng-click="show($event);">加载</button>

 $scope.show = function ($event) {
                //显示加载
                $ionicLoading.show();
                $event.stopPropagation();
            }

在Angular中已经对一些ng事件如ngClick,ngBlur,ngcopy,ngCut,ngDblclick…中加入了一个变量叫做$event.

在上边代码我们可以得到两个信息：

Angular支持的event： click dblclick mousedown mouseup mouSEOver mouSEOut mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste
Angular在执行事件函数时候传入了一个名叫$event的常量，该常量即代表当前event对象，如果你在Angular之前引入了jQuery那么这就是jQuery的event.

Angular 1.6提示$http.get(...).success is not a function

AngularJS路由之ui-router（三）大小写处理

AngularJS动画（二）

e.preventDefault()与e.stopPropagation()的区别

e.stopPropagation()阻止事件冒泡
<table border=''1''>
<tr>
<td><span>冒泡事件测试</span></td>
<td><span>冒泡事件测试2</span></td>
</tr>
</table>
我们先看这段js代码：

有的时候我们不希望事件冒泡咋办？

如果想获得事件相关信息，就要给匿名方法加一个e对象，e就是事件对象。

e.preventDefault()阻止事件默认行为。

$("a").click(function (e) {
alert("默认行为被禁止喽");
e.preventDefault();
});

return false等效于同时调用e.preventDefault()和e.stopPropagation()

return false除了阻止默认行为之外，还会阻止事件冒泡。如果手上有一份jquery源代码的话，可查看其中有如下代码：

if (ret===false){
　　event.preventDefault();
　　event.stopPropagation();
}
-----------------------------------------------------------------------------------------

原文：https://blog.csdn.net/xiaobing_hope/article/details/50674998

event.stopPropagation ()、event.preventDefault () 与 return false 的区别

做小 demo 时经常用到 return false 来取消默认事件，但一直不是很懂它和 preventDefault () 等的区别，今天查了查文档和大神们的博客，在这里对相关知识点做一个总结

首先开门见山，总结一下这三者的区别：

event.stopPropagation(): 阻止事件冒泡，对默认事件无影响

event.preventDefault(): 阻止默认事件，和事件冒泡无关

return false：原生 js 中，阻止默认事件，jQuery 中既会阻止默认事件又会阻止事件冒泡

这样理解起来可能不是很清晰，我们都知道，a 标签的默认事件之一为点击链接跳转，让我们做一个与此相关的小 demo 加深一下印象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{width: 100px;height: 100px;border: 1px solid #ccc;}
        div a{display: block;width: 30px;height: 100px;background: skyblue;}
    </style>
</head>
<body>
    <div id="box1">
        <a href="http://www.baidu.com"></a>
    </div>
     <div id="box2">
        <a href="http://www.baidu.com"></a>
    </div>
    <div id="box3">
        <a href="http://www.baidu.com"></a>
    </div>
    <div id="box4">
         <a href="http://www.baidu.com"></a>
    </div>
    <div id="box5">
        <a href="#"></a>
    </div>
    <script>
        /*event.stopPropagation()&&event.preventDefault()&&return false*/
        box1.onclick=function(){
            console.log("parent");        
        }//不阻止默认事件和冒泡，打印并且跳转


        /*event.stopPropagtion()，阻止事件冒泡，但不影响默认事件*/
        box2.onclick=function(){
            console.log("parent");
        }
        box2.children[0].onclick=function(event){
            event.stopPropagation();//仅跳转，冒泡被阻止
        }


        /*event.preventDefault(),阻止默认事件，但冒泡不被阻止*/
        box3.onclick=function(){
            console.log("parent");
        }
        box3.children[0].onclick=function(event){
            event.preventDefault();//打印parent，不跳转
        }


        /*return false; 在原生中，该方法仅会阻止默认事件，相当于调用了event.preventDefault()，但在jQuery中，它
        会同时阻止事件冒泡和默认事件*/
        box4.onclick=function(){
            console.log("parent");
        }
        box4.children[0].onclick=function(){
            return false;
        }</script>
    
</body>
</html>

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

他们似乎在做同样的事情……
一个现代的，一个古老的？或者它们是否被不同的浏览器支持？

当我自己处理事件（没有框架）时，我总是检查两者并执行两者（如果存在）。（我也是returnfalse，但我感觉不适用于附带的事件node.addEventListener）。

那为什么两者兼而有之？我应该继续检查两者吗？还是真的有区别？

（我知道，很多问题，但它们都是一样的=））

答案1

小编典典

stopPropagation防止当前事件在捕获和冒泡阶段进一步传播。

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
及更低版本替换stopPropagation为cancelBubble和替换preventDefault为returnValue

关于ReactJS SyntheticEvent stopPropagation和仅适用于React事件吗？的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于AngularJS阻止事件冒泡$event.stopPropagation()、e.preventDefault()与e.stopPropagation()的区别、event.stopPropagation ()、event.preventDefault () 与 return false 的区别、event.stopPropagation 和 event.preventDefault 有什么区别？等相关知识的信息别忘了在本站进行查找喔。

本文标签：