草庐IT

javascript - 如何仅在单击子项时触发父级单击事件

coder 2023-08-01 原文

child 和 parent 都是可点击的(child 可以是带有 jQ​​uery click 事件的链接或 div)。当我点击 child 时，如何只触发父点击事件而不触发子事件？

最佳答案

DOM 事件阶段
事件分为三个阶段:

  • 捕获:第一阶段是“捕获”，其中从 <window> 开始调用事件处理程序。并通过后代向下移动到事件的目标。
  • 目标:当目标上的事件监听器被调用时，第二阶段是“目标”阶段。
  • 冒泡:第三阶段是“冒泡”，首先处理程序监听目标的父级，然后逐渐调用该元素的祖先。

    • 事件也有一个“默认 Action ”，它发生在冒泡阶段之后。默认 Action 是浏览器定义的 Action ，通常发生在作为事件目标的元素种类上的指定类型的事件(例如浏览器导航到 href 的 <a> 上的 click ，而另一个类型元素上的 click 将具有不同的默认操作)。
    DOM Level 3 Events draft有一个图表以图形方式显示事件如何通过 DOM 传播:

    图片版权 © 2016 World Wide Web Consortium , ( MIT , ERCIM , Keio , Beihang )。 http://www.w3.org/Consortium/Legal/2015/doc-license (根据 the license 允许使用)
    有关捕获和冒泡的更多信息，请参阅:“What is event bubbling and capturing?”； DOM Level 3 Events draft ;或 W3C DOM4: Events
    防止事件影响 child
    对于您想要的，要在父事件之前获取事件并阻止子事件发生，您必须在捕获阶段接收事件。一旦你在捕获阶段收到它，你必须阻止事件传播到 DOM 树中较低元素上的任何事件处理程序，或者在冒泡阶段注册监听的元素(即元素/阶段上的所有监听器)在您的听众之后被事件访问)。您可以通过拨打 event.stopPropagation() 来完成此操作.
    在捕获阶段接收事件
    使用 addEventListener(type, listener[, useCapture]) 添加监听器时，您可以拥有 useCapture参数是 true .
    引用 MDN:

    [useCapture is] A Boolean that indicates that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. Events that are bubbling upward through the tree will not trigger a listener designated to use capture. Event bubbling and capturing are two ways of propagating events that occur in an element that is nested within another element, when both elements have registered a handle for that event. The event propagation mode determines the order in which elements receive the event. See DOM Level 3 Events and JavaScript Event order for a detailed explanation. If not specified, useCapture defaults to false.


    防止其他处理程序获取事件
  • event.preventDefault() 用于阻止默认操作(例如，阻止浏览器在 href 上导航到 <a> 的 click )。 [这在下面的示例中使用，但没有实际效果，因为文本没有默认操作。在这里使用它是因为在大多数情况下，当您添加单击事件处理程序时，您希望阻止默认操作。因此，养成这样做的习惯是个好主意，只是在您知道自己不想这样做时才这样做。]
  • event.stopPropagation() 用于防止稍后在任何事件阶段中元素上的任何处理程序接收事件。它不会阻止调用当前元素和阶段上的任何其他处理程序。它不会阻止默认操作的发生。
  • event.stopImmediatePropagation() : 相同元素和阶段上的处理程序按添加顺序调用。除了具有与event.stopPropagation()相同的效果外, event.stopImmediatePropagation()防止同一元素和事件阶段上的任何其他处理程序接收事件。它不会阻止默认操作的发生。鉴于此问题的要求是防止事件传播给 child ，我们不需要使用它，但可以这样做而不是使用 event.stopPropagation() .但是请注意，同一元素上的监听器是按添加顺序调用的。因此，event.stopImmediatePropagation()不会阻止在与您的监听器相同的元素和阶段上的那些监听器接收事件，这些监听器是在您的监听器之前添加的。

    • 例子
    在以下示例中，事件监听器同时放置在父级和子级 <div> 上。元素。只有放置在父级上的监听器接收事件，因为它在子级之前的捕获阶段接收事件并执行 event.stopPropagation() .

    var parent=document.getElementById('parent');
var child=document.getElementById('child');
var preventChild=document.getElementById('preventChild');

parent.addEventListener('click',function(event){
    if(preventChild.checked) {
        event.stopPropagation();
    }
    event.preventDefault();
    var targetText;
    if(event.target === parent) {
        targetText='parent';
    }
    if(event.target === child) {
        targetText='child';
    }
    console.log('Click Detected in parent on ' + targetText);
},true);
                      
child.addEventListener('click',function(event){
    console.log('Click Detected in child (bubbling phase)');
});

child.addEventListener('click',function(event){
    console.log('Click Detected in child (capture phase)');
},true);
    <input id="preventChild" type="checkbox" checked>Prevent child from getting event</input>
<div id="parent">Parent Text<br/>
  <div id="child" style="margin-left:10px;">Child Text<br/>
  </div>
</div>

    jQuery
    jQuery 不支持对事件使用捕获。有关原因的更多信息，请参阅:“Why does jQuery event model does not support event Capture and just supports event bubbling ”

    关于javascript - 如何仅在单击子项时触发父级单击事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38861601/

    子项javascriptcodeeventnoreferrerjquerycsshtml

    有关javascript - 如何仅在单击子项时触发父级单击事件的更多相关文章

    1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

      我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

    2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

      总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

    3. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

      关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

    4. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

      给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

    5. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

      我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

    6. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

      我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

    7. ruby - 如何指定 Rack 处理程序 - 2

      Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

    8. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2

      在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/

    9. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

      我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为

    10. ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2

      我有一大串格式化数据(例如JSON)，我想使用Psychinruby​​同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解

    随机推荐