点击事件不响应的问题

来源:互联网 发布:2015年疲劳驾驶数据 编辑:程序博客网 时间:2024/05/16 00:50

1/ 项目中遇到了几个点击问题不响应的问题,现在总结几点如下。

 第一种 :在一个父div上面写了一个子div,刚开始时候,点击子div的时候(对子div阻止了时间冒泡),子的div的点击事件是可以触发的,但是等到第二次点击了父div后再点击子div,子div的事件不再触发,后来追踪到,是因为在触发父元素的时候,对父元素中的相关的布局进行了修改改变,改变使用的是dom重排,使用了$("newparentDiv").innerHTML = $("oldparentDiv").innerHTML  + 新增的html片段。  乍一看,只对元素添加了一个删除的按钮,但是其实dom结构是重新排列了的,新的div中的元素已经不是原来的原来了,所以之前的元素绑定失效。  如果需要在某个dom上添加新的元素,就比如要在一个框中添加一个关闭和缩放按钮,最好的方法不是对innerHTML直接操作,而是使用appendChild()方法对其进行追加,这样就不会引起之前dom中元素的变化,自然也不会出现失效问题。

2 两个重要的方法,禁止事件冒泡和禁止事件的默认行为。

event.stopPropagation();禁止事件冒泡,是对某个子元素事件用的,比如有个表格,表格中有个button,点击表格的时候,有个点击表格事件,点击button的时候,也会冒泡到表格事件中,即就是button时间会引起同时除非表格事件,这个时候,对写button的事件中 ,添加event.stopPropagation();就不会在点击button的时候,引起点击表格的事件。

event.preventDefault();禁止默认的事件,比如常见的a元素,a元素中href是个链接,当我们点击a元素的时候,就会自动跳转到链接的地方,但是当我们对a元素进行禁止默认事件的时候,点击a元素的时候,就不会跳转。

阅读全文
0 0