`

子元素事件触发时不执行父元素的对应事件

    博客分类:
  • JS
 
阅读更多

如果父元素和子元素同时绑定了同样类型的事件(如click),

点击子元素时,如果不想触发父元素的绑定事件,需要在子元素的时间函数里加入以下语句

e.stopPropagation();

参考代码

$("[name='chk']").click(function(event) {
    event.stopPropagation();
    //省略
    return true;
})

 

 

分享到:
评论

相关推荐

    JS中mouseover和mouseout多次触发问题如何解决

    这意味着,只有当鼠标指针实际进入或离开被选元素本身时,这些事件才会被触发,从而避免了因子元素触发而导致的父元素事件触发。 4. 解决方案实施:文章提出使用mouseenter和mouseleave来替换mouseover和mouseout,...

    事件及事件处理程序 事件及事件处理程序

    当一个事件发生时,对应的事件处理程序会被调用,执行预定的操作。例如,当用户点击一个按钮,事件处理程序可能会执行提交表单、显示弹窗或执行其他业务逻辑的操作。 事件模型通常有三种主要类型: 1. **冒泡模型*...

    选项卡事件委托demo

    这样,当子元素触发事件时,事件会向上冒泡到父元素,父元素的事件处理器可以检查事件源,决定是否执行相应的操作。这种方法的优势在于减少了内存消耗和性能开销,特别是当有大量动态生成的元素时。 在“选项卡事件...

    Vue在chrome44偶现点击子元素事件无法冒泡的解决方法

    在Vue框架中,事件冒泡是一种常见的事件处理机制,它允许事件从子元素向父元素逐级传播。在本文中,我们将探讨一个特定的问题,即在Chrome 44浏览器中,Vue应用中偶尔出现的子元素点击事件无法冒泡到父元素的问题,...

    js活用事件触发对象动作

    此外,由于事件冒泡机制,子元素触发的事件会被父元素捕获,因此可以利用这一特性来简化代码。 事件触发对象动作的技巧在实际开发中非常实用,特别是在大型项目中,可以避免大量重复的事件绑定代码,提高性能。学习...

    第11章 JS-Web-API-事件【事件不会,等于残废,必考!必考!】.rar

    当事件冒泡(或捕获)到父元素时,处理程序会检查事件源(`event.target`),以确定是否需要执行相应的操作。 另外,还有一些高级事件特性,如`Event.preventDefault()`阻止默认行为(如链接的跳转或表单的提交),...

    JS代码触发事件代码实例

    当子元素触发事件时,父元素的事件处理程序可以根据事件对象的`target`属性判断并处理具体子元素。 总结,JavaScript的事件触发机制是实现用户交互和动态效果的核心。通过理解事件处理程序、事件创建和派发,以及跨...

    事件冒泡及捕获

    例如,你可以为页面上的一个容器元素设置点击事件监听器,而这个容器包含许多子元素,这样当任何子元素被点击时,都会触发该容器的事件处理函数。 事件捕获则与事件冒泡相反,它从最不具体的节点(DOM树的根节点)...

    非常小且简单的工具类用于将事件侦听器绑定到元素

    2. **事件委托**:利用事件冒泡原理,通过在父元素上设置一个事件侦听器来处理子元素的事件,减少内存占用和性能消耗。 3. **事件阻止和默认行为处理**:可能包含阻止事件传播(`event.stopPropagation()`)或阻止...

    RIA应用开发实验指导书:实验三 jQuery事件处理.doc

    它将事件绑定到一个静态父元素上,而不是直接绑定到动态生成的子元素。例如,对于一个动态添加的表格行,可以这样处理鼠标悬停事件: ```javascript $('table').on('mouseover', 'tr', function() { $(this)....

    jquer事件绑定

    更推荐的做法是使用事件委托技术,即把事件绑定到一个父元素上,然后利用事件冒泡机制来判断具体触发事件的子元素。 #### 四、自定义命名空间事件绑定的意义 - **提高可维护性**: 使用命名空间可以有效地区分不同...

    3 妙味课堂原创JavaScript视频教程 事件详解3课资料

    利用事件冒泡原理,当子元素发生事件时,事件会冒泡到父元素。 通过这个"妙味课堂原创JavaScript视频教程——事件详解3课资料",学习者将掌握JavaScript事件的各个方面,从而提升Web应用的互动性和用户体验。同时,...

    11事件处理共24页.pdf.zip

    将事件绑定到父元素上,然后通过事件冒泡机制来处理子元素的事件。 10. **并发控制**:在多线程环境中,事件驱动编程需要考虑并发问题,如线程安全、竞态条件和死锁。 事件处理是构建动态、交互性强的应用程序的...

    【Web API DOM07】事件委托

    在Web开发中,事件通常被绑定到DOM元素上,当用户与这些元素交互时触发相应的事件处理函数。然而,如果页面上有大量的动态生成或者相似的元素,每个都绑定事件可能会导致代码冗余且降低页面性能。事件委托是一种策略...

    浅谈Jquery为元素绑定事件

    当事件发生时,on()方法会在父元素上检测该事件,并检查事件是否是由其子元素触发的,如果是,则执行相应的事件处理函数。这样一来,即使是后来添加到DOM中的元素,也能响应事件处理函数。 4. on()方法的使用示例:...

    JQ 事件绑定

    事件委托是 `.on()` 的一个重要应用,利用事件冒泡原理,将事件绑定到父元素上,通过判断事件触发的子元素来执行相应的操作。这样可以减少事件处理器的数量,提高性能。 ```javascript $('ul').on('click', 'li', ...

    05 React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

    例如,`event.target`是触发事件的元素,`event.preventDefault()`可以阻止事件的默认行为,`event.stopPropagation()`则可以防止事件冒泡到父组件。通过事件对象,我们可以更好地控制事件的处理和交互。 React的...

    js点击事件的执行过程实例分析【冒泡与捕获】

    阻止捕获则是不让事件继续向下捕获到子元素,这可以通过检查`event.target`是否等于预期的元素来实现。 在实际开发中,了解事件的捕获和冒泡机制有助于优化事件处理逻辑,提高用户体验。例如,有时我们可能希望阻止...

    在父级窗口监听子预制体中的点击事件并更新页面的Cocos2dx游戏引擎实例

    在Cocos2dx游戏引擎中,开发者经常需要处理各种交互事件,例如子对象与父对象之间的通信。在本实例中,我们关注的是如何在父级窗口监听子预制体中的点击事件,并利用这些事件来更新页面内容。这在游戏设计中至关重要...

Global site tag (gtag.js) - Google Analytics