`

阻止checkbox的父元素事件冒泡

阅读更多

今天在开发后台权限管理时使用了tinyaccordion 这个小控件,如图所示

这个结构代码大致如下:

在过程中长时间纠结于,点击标注的checkbox也会触发其父元素H3的click事件,

起初对checkbox是监听其 change 事件,不管怎么搞,H3的click事件都会被触发,折腾了3个多小时,使用了各种方法都不行,几乎是把这个小控件完全自己实现了一遍都没有搞定这个问题,

 

哀莫大于心死,索性直接监听checkbox的click事件,代码如下:

$(':checkbox.chbox').click(function(evt){
    var is = $(this).attr('checked');
    var xid = $(this).attr('xid');
        
    if ( is )
    {
        $(':checkbox[xtype="' + xid + '"]').attr('checked','checked');
    }
    else
    {
        $(':checkbox[xtype="' + xid + '"]').removeAttr('checked');
    }
    // 阻止冒泡
    evt.stopPropagation();
});

 

这样一来无非多写一些代码,也不管它是否会触发checkbox的change事件,试过 直接返回false,但是这么一来根本就不会勾选,所以直接阻止冒泡吧...

 

此处标注下... 以后不会再犯这么低级的错误

  • 大小: 14.7 KB
  • 大小: 6.2 KB
分享到:
评论

相关推荐

    React冒泡和阻止冒泡的应用详解

    如果`e.target`匹配到特定元素,可以阻止事件继续冒泡。例如,如果`e.target`是某个特定的DOM元素,那么可以决定是否执行后续操作。 以下是一个React组件`Counter`的示例,它展示了如何使用这些方法: ```jsx ...

    jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理

    冒泡是指一个事件在DOM树中从子元素传递到父元素的过程,这是JavaScript事件模型的一部分。在jQuery中,事件冒泡机制允许事件不仅仅在当前元素上执行,还能传递到更高的层级。 1. **stopPropagation**: jQuery重载...

    jQuery实现CheckBox全选、全不选功能

    - `$(':checkbox').click(function(evt){...})` 用于阻止Checkbox的点击事件冒泡,防止事件向上冒泡到父元素。 - `$("#checkAll").click(function() {...})` 事件监听全选Checkbox的点击,当全选Checkbox被点击时,...

    jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例

    6. `e.stopPropagation()`:这是一个事件方法,用来阻止事件进一步冒泡到父元素。在CheckBox的点击事件中使用,是为了防止点击CheckBox时触发其父元素`div`的点击事件。 接下来是HTML结构部分: ```html ...

    JQuery实现checkbox的全/不全选,以及反选功能

    为避免这种情况,我们可以在事件处理函数中添加`stopPropagation()`,阻止事件冒泡到父元素。 ```javascript subCheckboxes.on('change', function(event) { event.stopPropagation(); // 反选主复选框 $('#...

    JQuery Easyui Tree的oncheck事件实现代码

    为了避免这种情况,你可能需要使用`event.stopPropagation()`阻止事件向上冒泡,或者调整事件绑定的顺序和处理逻辑,确保事件处理函数只在正确的情况下执行。 总的来说,JQuery Easyui Tree虽然没有内置的`onCheck`...

    JavaScript中的事件处理

    - 通过将事件监听器添加到父元素,可以处理子元素的事件,从而减少事件监听器的数量,提高性能。 7. **事件对象**: - 当事件触发时,JavaScript会创建一个事件对象,它包含了关于事件的详细信息,如事件类型、...

    jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析

    而`triggerHandler()`只在当前元素上执行事件处理函数,不会向父元素冒泡。 2. **默认行为**:`trigger()`会执行事件的默认行为,除非在事件处理函数中明确阻止。相反,`triggerHandler()`不会执行默认行为,它主要...

    第七课 进阶指令1

    -- 阻止事件冒泡 --> <button @click.stop.prevent="fn2"></button> <!-- 阻止默认行为和冒泡 --> ``` 2. **v-bind 指令**: - `v-bind` 动态地绑定元素的属性或属性值,简写为 `:`。它可以用于绑定 `src`, `...

    js从xml读取数据生成树形控件

    2. **事件冒泡与阻止**:由于树形控件的嵌套结构,可能需要处理事件冒泡,确保只响应目标节点的点击事件,而不是其父节点或子节点。 实现全选/全不选功能: 1. **顶级复选框**:在树形控件的顶部添加一个全选/全不...

    B站vue笔记.doc

    6. **事件修饰符stop**:阻止事件冒泡,确保事件只在其触发的元素上执行。 **prevent**:阻止事件的默认行为,例如表单提交时,可以防止页面刷新。 7. **key**:在使用`v-for`循环时,添加`key`属性可以提高DOM...

Global site tag (gtag.js) - Google Analytics