标签: stoppropagation

有一些像这样的HTML代码:

<ul>
    <li id='root' class='tree-node'>
      root
      <ul>
        <li class='tree-node' id='node1'>node1</li>
        <li class='tree-node' id='node2'>node2</li>
        <li class='tree-node' id='node3'>node3</li>
        <li class='tree-node' id='node4'>node4
            <ul>
                <li class='tree-node' id='node4-1' >node4-1</li>
                <li class='tree-node' id='node4-2' >node4-2</li>                    
            </ul>
        </li>
      </ul>
    </li>

<ul>

我想将click事件绑定到具有树节点类的每个标记

并将click事件绑定到文档

这是我的代码:

$(".tree-node").click(function(e){
    console.log($(this).attr("id"));
});

$(document).click(function(e){
    console.log("document clicked!");   
});

stopPropagation()是否有任何替代方法可以阻止事件从node4-2冒泡到其父节点？

小提琴:http://jsfiddle.net/R6ySc/

我不明白为什么,当使用stopPropagation()或stopDefault()使用jQuery时,你必须在事件处理函数中向回调引入一个参数.浏览器如何知道传递给该函数的内容？另外,为什么不使用this工作？

这是有效的代码.我用粗体/星号表示令人困惑的部分:

$(document).ready(function() {
   $(".see-photos").on("click", function(**event**) {
    event.stopPropagation();
    $(this).closest(".tour").find(".photos").slideToggle();
  });
  $(".tour").on("click", function() {
    alert("This should not be called");
  });
});

对我来说,这样会更有意义.请注意event,处理函数中的回调没有参数.

$(document).ready(function() {
  $(".see-photos").on("click", function() {
    $(this).stopPropagation();
    $(this).closest(".tour").find(".photos").slideToggle();
  });
  $(".tour").on("click", function() {
    alert("This should not be called");
  });
});

为什么此代码不适用于Firefox和IE？镀铬就可以了。

$(document).click(function(e) {
    if ($(".contentIconDesk").hasClass('markIconDesk')) {           
        $(".contentIconDesk").removeClass('markIconDesk');          
        wndSelected = "";   
    }       
});

function markMe(icon, wnd) {
    event.stopPropagation();            
    if ($('#'+icon).hasClass('markIconDesk')) {
        $(".contentIconDesk").removeClass('markIconDesk');
        wndSelected = "";               
    } else {
        $(".contentIconDesk").removeClass('markIconDesk');
        $('#'+icon).addClass('markIconDesk');
        wndSelected = wnd;                  
    }       
};

如果我的HTML中有一些div，MarkMe();则会调用该函数onClick()。问题出在event.stopPropagation()。当我单击以添加类时，浏览器会单击$(document)。

如果有一个好的建议而不是上面的代码，那将是很好的。

我正在构建一个侧边栏垂直菜单,其中包含主菜单项和一级子菜单项.

我正在使用Javascript和CSS,以便当用户单击顶级菜单项时,其子菜单项将切换其可见性 - 即单击主项目及其子项将出现.再次单击主项目,子项目消失.

为了避免在用户单击子菜单项时切换子菜单,我使用了event.stopPropagation()方法.

所需的结果适用于Chrome,Safari和Dolphin,但在Firefox 26.0和Android Firefox 26.0.1中不起作用.

如果您运行此示例(JSBin),您会注意到您可以单击Menu 2和/或Menu 3显示子菜单.这部分适用于所有浏览器.

但是,如果在Firefox中单击子菜单项(即菜单3.1),子菜单将消失 - 这不是我想要的效果.如果您点击Chrome/Safari中的子菜单项,子菜单将保持可见 - 这就是我想要发生的事情.

我读了Mozilla开发者网络的event.stopPropagation()的支持Chrome,Firefox (Gecko),IE9,Opera,和Safari (WebKit).所以,我很困惑为什么stopProp方法在我的情况下不起作用.

你能看看我的JS例子并告诉我它是什么？

这是我正在运行的Javascript(也在JSBIN):

function goTo(id) {
     event.stopPropagation();
     location.href = id;
 }

 function toggleChildDisplay(parentElement) {
     var children = parentElement.children;
     var displayStyle = "";
     for (var i = 0; i < children.length; i++) {
         displayStyle = children[i].style.display;
         if (displayStyle.toLowerCase() === "none" || displayStyle …

我有点困惑.我列出了名称旁边带有复选框的名称.列表是在向后端发布后动态构建的.

问题是每当我点击复选框时立即取消选中它.我之所以知道这一点,是因为如果在事件中插入警报,则会实际选中该复选框,直到警报被取消.

这是我的代码:

$("#NamesList").on("click", "input[type='checkbox']", function (e) {
    CheckboxClicked();
    return false;
})
.on("click", "li", function (e) {
    e.preventDefault();
    e.stopPropagation();

    switch (e.target.nodeName) {
         case "A":
             GetPerson(e.target.href)
             break;
         case "LI":
              GetPerson($("a", e.target).attr("href"))
              break;
         default: return false;
     }

     return false;
});

事实上,我在listitem中有链接,我需要能够遵循.如果取出导航到链接的部分,则复选框功能正常.

这就是典型的名称列表:

<ul id="NamesList">
     <li id="1">
         <input class="checkbox" type="checkbox" />
         <a href="/some/link/somewhere/1">John Smith</a>
     </li>
</ul>

有任何想法吗？

我正在创建一个离子应用程序，当我单击卡片时会触发模式，我面临的问题是，当我单击卡片上的按钮时，模式也会打开，我该如何阻止这种情况发生。我对任何解决方法持开放态度，因为我已经被困在这个问题上有一段时间了。下面是一些有用的代码和图片：

//html
  <ion-grid>
    <ion-row>
      <ion-col size="6" *ngFor="let item of exercises">
        <ion-card class="exercise-card" (click)="openModal(item.id)">
          <img [src]=item.image class="image-card">
          <h3 style="font-weight: bold;">{{item.name}}</h3>
          <h5>{{item.sets}} sets of {{item.reps}} reps and {{item.remarks}}</h5>
          <h6>{{item.date | date: 'dd/MM/yyyy'}} ({{item.time}})</h6>
          <br>
          <div style="text-align: center;">
            <ion-button size="medium" style="width: 30%;" color="success" (click)="complete(item)">
              <ion-icon slot="icon-only" name="checkmark-outline"></ion-icon>
            </ion-button>
            <ion-button size="medium" type="submit" style="width: 30%;" [routerLink]="['/edit-exercise', item.id]">
              <ion-icon slot="icon-only" name="create-outline"></ion-icon>
            </ion-button>
            <ion-button size="medium" style="width: 30%;" color="danger" (click)="delete(item)">
              <ion-icon slot="icon-only" name="trash-bin"></ion-icon>
            </ion-button>
          </div>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

该模式仅应在以下情况下触发： 单击此页面上的卡片：

。

但当我单击蓝色编辑按钮时它也会触发：

。