标签: event-propagation

请找到以下小提琴http://jsfiddle.net/yesvin/Xj8p8/

<ul data-role="listview">
        <li data-role="fieldcontain">
            <label for="basic">Text Input:</label>
            <input type="text" name="name" id="basic" value=""  />
         </li>
     <li data-role="fieldcontain">
            <label for="basic">Text Input:</label>
            <input type="text" name="name" id="basic" value=""  />
         </li>
     <li data-role="fieldcontain">
            <label for="pageselect">page select</label>
            <select name="pageselect" id="pageselect" data-native-menu="false">                
                <option value="">Choose One</option>
                <option value="">pageselect opt 1</option>
                <option value="">pageselect opt 2</option>
                <option value="">pageselect opt 3</option>
            </select>
         </li>
     <li data-role="fieldcontain">
            <label for="basic">Text Input:</label>
            <input type="text" name="name" id="basic" value=""  />
         </li>
</ul>   

<a href="#pop" data-rel="popup" data-position-to="window" data-role="button" id="farmer_family_member">Add Popup</a>


<div data-role="popup" id="pop">
    <ul data-role="listview">
        <li …

我正在尝试检测部分重叠的SVG元素上的mousemove事件,如此图像中所示

小提琴

<svg>
    <rect id="red"    x=10 y=10 width=60 height=60 style="fill:#ff0000" />
    <rect id="orange" x=80 y=10 width=60 height=60 style="fill:#ffcc00" />
    <rect id="blue"   x=50 y=30 width=60 height=60 style="fill:#0000ff; fill-opacity: 0.8" />
</svg>

$('rect').on('mousemove', function()
{
    log(this.id);
});

现在,当鼠标悬停在蓝色/红色交叉点上时,我想检测这两个元素上的鼠标事件,蓝色/橙色组合则相同.正如您在日志中看到的那样,在这些情况下,事件当前仅针对蓝色框触发,因为它位于顶部.

这与指针事件有关,因为我可以通过将蓝色元素的指针事件设置为无,在悬停蓝色元素时获取红色和橙色元素来触发事件.但后来我没有得到蓝盒的事件,所以这也不是一个可行的选择.

我将使用哪个库解决这个问题.我在这个d3示例中查看了事件冒泡,但这仅适用于嵌套在DOM中的元素.我有很多可能与许多其他元素重叠的独立元素,因此无法以这种方式构建我的DOM.

我猜最后的办法是找到当前鼠标位置的元素,并手动触发事件.因此,我查看了document.elementFromPoint(),但这只会产生1个元素(并且在SVG中可能不起作用？).我发现jQuerypp功能中,即发现在给定位置的元素,见这里.这个例子看起来很棒,除了它是DIV而不是SVG内部.当用svg矩形元素替换div时,小提琴似乎破了.

我该怎么办？!

请理解，我是 Angular 的新手，总体上是开发人员，所以这可能是一个非常没有经验的问题。

问题是，我从组件的 HTML 模板文件中调用一个函数，并以 $event 作为参数，它最终捕获了与我希望定位的元素不同的元素。我调用该事件的那个元素有两个子元素......

HTML：

          <div class="cursorPointer" (click)="answeredQuestion($event)">
                <div id="chickenTenders" class="backImageCov question_0Img"></div>
                <h3 class="questionSubTitle">Chicken Tenders</h3>
           </div>

"cursorPointer"我的目标是每次调用此事件时检索 div 容器。我假设这是一个事件冒泡问题，因为如果我单击 id 为 的 div 容器，我的 ts 文件上的函数中的参数"chickenTenders"将返回相同的容器 ...$eventansweredQuestion()

我已经在网上搜索过（停止鼠标事件传播），但在这个例子中，学生问的问题来自指令，所以我对解决方案可能是什么感到困惑......

我已经尝试过：

(click)="answeredQuestion(0, $event);false"

和：

(click)="answeredQuestion(0, $event); $event.stopPropagation()"

然而，似乎没有一个能够帮助解决这个问题。<div class="cursorPointer">简而言之，我希望该解决方案能够为我提供一种简单的方法来每次访问该父元素 ( )，即使子元素是单击的元素。

谢谢你们的宝贵时间，我很感激。

如果我不是false从事件回调或使用e.stopPropagationjQuery的功能返回，则该事件会使DOM冒泡。

在大多数情况下，我都不关心事件是否冒泡。类似于此DOM结构示例：

?<div id="theDiv">
    <form id="theForm" >
        <input type="submit" value="submit"/> 
    </form>
</div>???????????????????????????????????????????????????????????????????????????????????????????

通常，我没有这样的多个嵌套的提交回调：

$('#theDiv').submit(function() {
    alert('DIV!');
});
$('#theForm').submit(function(e) {
    alert('FORM!');
    e.preventDefault();
});?

小提琴
DEMO显示submit事件冒泡到<div>！
如果我停止传播或只是阻止默认设置，对我来说没有什么区别。

在这些情况下，如果停止传播，我将获得性能收益吗？

我真的不明白e.stopPropagation()的作用.

如果我有一个链接使用return false的处理程序我应该得到我想要的东西(防止默认的链接行为,所以它不"来电"未来HREF位置):

<a id="myLink" href="http://www.google.com">Go to google</a>?

$('#myLink').click(function (e) {
    alert("No, you don't go to Google");
    return false;
});?

添加e.stopPropagation()我能得到的东西？你能给我一个坚实的例子向我展示e.stopPropagation()可以做些什么吗？

我有一个Ember应用程序,我正在使用一个动作来应用CSS动画.一旦动画完成,我想将操作从控制器冒泡到我的路线以处理更多功能.

我知道如果我return: true;的动作会冒出来,就像这里所解释的那样.

这就是我的控制器的样子:

App.MyController = Ember.ObjectController.extend({
    actions: {
        myAction: function() {
            $('.my-element').addClass('my-animation-class').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
                console.log('working');
                return true;
            }
        }
    }
});

如果我在animationend回调中将某些内容记录到我的控制台,我可以看到它正常工作,如果我移出return: true;回调,则该动作会成功冒泡.但是,在回调内部返回true是行不通的.

我错过了什么？

我正在使用Hammer.js 2.0.4,我有两个hammerjs实例来监听tap事件:在父div元素中,在子元素中有一个.我希望在孩子处理时停止事件传播.但是,hammer.js 2不支持.

在下面的示例中,我希望tap子事件的事件首先触发,然后触发父事件的事件(事件从子节点冒泡到父节点).相反,它看起来像第一个创建的hammer.js 实例的tap事件首先触发.

尝试以下示例(也在jsbin上):

<!DOCTYPE html>
<html>
<head>
  <script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.js"></script>
  <style>
    #child {
      width: 200px;
      height: 200px;
      background: lightgreen;
    }
  </style>
</head>
<body>
<p>
  See the browser console. Why does the tap event of the parent div fire first?
</p>
<div id="parent">
  <div id="child">click here</div>
</div>

<script>
  var hammerParent = new Hammer(document.getElementById('parent'));
  var hammerChild = new Hammer(document.getElementById('child'));

  hammerParent.on('tap', function (event) {
    console.log('tap parent');
  });

  hammerChild.on('tap', …

在我的页面上(pass ="shooga1"),点击COLLECTIONS(左侧边栏)会显示一个子菜单,其中包含一个名为"COLLECTION#1"的项目.单击此项目会显示另一个子菜单,由于某种原因无法单击其中的项目.为什么不？

这是我的代码:

$( 'li.item_collection' ).toggle(function() {
    $( 'li.item_collection > .sub-menu' ).slideDown( { duration: 200, easing: 'easeInOutExpo' } );
}, function() {
    $( 'li.item_collection > .sub-menu' ).slideUp(100);
});
$( 'li.item_collection > .sub-menu' ).click(function(e) {
   e.stopPropagation();
});

$( 'li.item_collection > .sub-menu > li' ).toggle(function() {
    $(this).children('ul').slideDown( { duration: 200, easing: 'easeInOutExpo' } );
}, function() {
    $(this).children('ul').slideUp(100);
});
$( 'li.item_collection > .sub-menu > .sub-menu > li' ).click(function(e) {
   e.stopPropagation();
});

已经有一些尝试来回答这个问题： here，here和here。然而，没有一个答案给出了可靠的回应。我不是指的event阶段capture，bubble以及target如何stopPropagation()影响整个事件。我正在寻找添加stopPropagation()到 DOM 节点将有利于整体代码的情况？

假设我有 3 个微服务，并且我想使用 OpenTelemetry/Jaeger UI 跟踪请求。如何添加通过跨度传播的行李？假设我有一个名为 WeatherForecast 的 API，它向另一个名为 Matrix 的服务执行 get 请求，我创建了一个如下所示的行李：

    var res = HttpClient.GetStringAsync("http://localhost:5002/Matrix").Result;
    Baggage.Current.SetBaggage("weatherforecastid", "abced123");`

如何让当前行李通过 Matrix 服务（调用其他服务）传播？我尝试使用 Baggage.Current.SetBaggage 认为它会引用 Wea​​therForecast 中的行李，但看起来它只创建了一个新行李，并且没有传播以前的行李。