今天在开发后台权限管理时使用了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,但是这么一来根本就不会勾选,所以直接阻止冒泡吧...
此处标注下... 以后不会再犯这么低级的错误
相关推荐
如果`e.target`匹配到特定元素,可以阻止事件继续冒泡。例如,如果`e.target`是某个特定的DOM元素,那么可以决定是否执行后续操作。 以下是一个React组件`Counter`的示例,它展示了如何使用这些方法: ```jsx ...
冒泡是指一个事件在DOM树中从子元素传递到父元素的过程,这是JavaScript事件模型的一部分。在jQuery中,事件冒泡机制允许事件不仅仅在当前元素上执行,还能传递到更高的层级。 1. **stopPropagation**: jQuery重载...
- `$(':checkbox').click(function(evt){...})` 用于阻止Checkbox的点击事件冒泡,防止事件向上冒泡到父元素。 - `$("#checkAll").click(function() {...})` 事件监听全选Checkbox的点击,当全选Checkbox被点击时,...
6. `e.stopPropagation()`:这是一个事件方法,用来阻止事件进一步冒泡到父元素。在CheckBox的点击事件中使用,是为了防止点击CheckBox时触发其父元素`div`的点击事件。 接下来是HTML结构部分: ```html ...
为避免这种情况,我们可以在事件处理函数中添加`stopPropagation()`,阻止事件冒泡到父元素。 ```javascript subCheckboxes.on('change', function(event) { event.stopPropagation(); // 反选主复选框 $('#...
为了避免这种情况,你可能需要使用`event.stopPropagation()`阻止事件向上冒泡,或者调整事件绑定的顺序和处理逻辑,确保事件处理函数只在正确的情况下执行。 总的来说,JQuery Easyui Tree虽然没有内置的`onCheck`...
- 通过将事件监听器添加到父元素,可以处理子元素的事件,从而减少事件监听器的数量,提高性能。 7. **事件对象**: - 当事件触发时,JavaScript会创建一个事件对象,它包含了关于事件的详细信息,如事件类型、...
而`triggerHandler()`只在当前元素上执行事件处理函数,不会向父元素冒泡。 2. **默认行为**:`trigger()`会执行事件的默认行为,除非在事件处理函数中明确阻止。相反,`triggerHandler()`不会执行默认行为,它主要...
-- 阻止事件冒泡 --> <button @click.stop.prevent="fn2"></button> <!-- 阻止默认行为和冒泡 --> ``` 2. **v-bind 指令**: - `v-bind` 动态地绑定元素的属性或属性值,简写为 `:`。它可以用于绑定 `src`, `...
2. **事件冒泡与阻止**:由于树形控件的嵌套结构,可能需要处理事件冒泡,确保只响应目标节点的点击事件,而不是其父节点或子节点。 实现全选/全不选功能: 1. **顶级复选框**:在树形控件的顶部添加一个全选/全不...
6. **事件修饰符stop**:阻止事件冒泡,确保事件只在其触发的元素上执行。 **prevent**:阻止事件的默认行为,例如表单提交时,可以防止页面刷新。 7. **key**:在使用`v-for`循环时,添加`key`属性可以提高DOM...
- `Ext.DomHelper.append(parent, config)`: 向父元素添加子元素。 - `Ext.DomHelper.insertHtml(position, ref, html)`: 在指定位置插入HTML字符串。 #### 10. Ext.Template 类 (P.14) - **概述**:用于生成HTML...