[置顶] 阻止checkbox的父元素事件冒泡

解决tinyaccordion控件Checkbox点击事件问题

最新推荐文章于 2024-06-22 21:00:00 发布

原创最新推荐文章于 2024-06-22 21:00:00 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 同时被 3 个专栏收录

21 篇文章

订阅专栏

阻止冒泡

1 篇文章

订阅专栏

父元素事件

1 篇文章

订阅专栏

本文记录了在使用tinyaccordion控件时遇到的一个问题：点击Checkbox会触发其父元素H3的click事件。经过多次尝试后，通过监听Checkbox的click事件并阻止事件冒泡解决了该问题。

今天在开发后台权限管理时使用了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,但是这么一来根本就不会勾选,所以直接阻止冒泡吧...

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