阻止子元素继承父元素事件具体思路及实现_javascript技巧

复制代码 代码如下:

<div id="p_box" onclick="a()">
<div id=p_cont>
</div>
</div>

#p_box包括#p_cont,当点击#p_box区域任何位置时(包括#p_cont),都会触发a事件。想要阻止点击#p_cont区域时触发a事件,需要在#p_cont区域内加入阻止事件冒泡的代码。
变成

复制代码 代码如下:

<div id="p_box" onclick="a()">
<div id="p_cont" onclick="stopBubble(this.id)">
</div>
</div>
function a(){
//这里是a事件的代码
}
function stopBubble(e) {
if (e && e.stopPropagation) {//非IE浏览器
  e.stopPropagation();
}
else {//IE浏览器
window.event.cancelBubble = true;
}
}

时间: 2024-10-28 10:07:04

阻止子元素继承父元素事件具体思路及实现_javascript技巧的相关文章

JavaScript子窗口调用父窗口变量和函数的方法_javascript技巧

本文实例讲述了JavaScript子窗口调用父窗口变量和函数的方法.分享给大家供大家参考.具体如下: 示例1:子窗口是新打开的窗口 父窗口: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" http://www.w3.

js 阻止子元素响应父元素的onmouseout事件具体实现

 本文为大家介绍下js阻止子元素响应父元素的onmouseout事件,具体实现如下,感兴趣的朋友可以参考下  代码如下: $(".target-menu").mouseout(function(e){  evt = window.event || e;  var obj = evt.toElement || evt.relatedTarget;  var pa = this;  if(pa.contains(obj)) return false;  $(this).hide();  }

Javascript中找到子元素在父元素内相对位置的代码_javascript技巧

经过自己一晚上尝试,貌似找到了一个方法. 现在脑袋还糊涂,先记下来,以后再分析. 复制代码 代码如下: // 找到子元素在父元素中的相对位置 function getElementTop(element){ var el = (typeof element == "string") ? document.getElementById(element) : element; if (el.parentNode === null || el.style.display == 'none')

前端-css中百分比是先继承父元素的值再计算还是直接计算父元素再作为自己的值?

问题描述 css中百分比是先继承父元素的值再计算还是直接计算父元素再作为自己的值? 比如font-size, 是先继承父元素的值比如20px作为自己的值然后再乘以120%,结果作为最终的font-size.还是直接计算20px * 120%把最终结果的值作为font-size? 解决方案 依据父容器设置的值来重新计算,你问的这2个不都是一样的,直接计算那不是20还不是从父容器来的 解决方案二: 要看你的元素是否浮动,如果浮动,就直接继承了.

高效的获取当前元素是父元素的第几个子元素_javascript技巧

例如处理事件的时候,有时候需要知道当前点击的是第几个子节点,而HTML DOM本身并没有直接提供相应的属性,需要自己来计算. 从一个索引序号,很容易得到该索引对应的子节点或者子元素,直接用parentNode.childNodes[index] 或 parentNode.children[index] 就行. 但反过来,已知一个节点或元素对象,要知道它的索引序号则没有那么直接了. 一些特殊的元素,HTML DOM有对应的属性表示其索引序号,主要是表格的TD 和 TR 元素. 表格单元格TD元素有

子元素scroll父元素容器不跟随滚动JS实现

一.开场暖身 网上常见蹲来蹲去的小段子,比方说:"李代沫蹲,李代沫蹲,李代沫蹲完黄海波蹲:黄海波蹲,黄海波蹲,黄海波蹲完宁财神蹲:宁财神蹲,宁财神蹲,宁财神蹲完张耀扬蹲;张耀扬蹲,张耀扬蹲,张耀扬蹲完郭美美蹲;郭美美蹲,郭美美蹲,郭美美蹲完--".应该源自"萝卜蹲,萝卜蹲,萝卜蹲完苹果蹲--". 在网页中,滚动条的滚动行为也是类似的调调,如果页面出现多个内嵌滚动条,则行为表现是:子元素滚,子元素滚,子元素滚完父元素滚:父元素滚,父元素滚,父元素滚完容器滚-- 比方说

jQuery移除元素自动解绑事件实现思路及代码_jquery

世界本该如此! 所以,在现代浏览器,如果你将一个元素从DOM树种进行移除的时候,浏览器会自动帮你绑定的事件进行解绑以释放其占用的内存.也许你猜到了,较老版本的浏览器则不会主动去做这件事,所以,当你的应用在较老版本的浏览器运行的越久,其消耗内存越多,应用就会变得越来越卡.因此,需要我们自己对要删除的元素进行事件解绑. 实现思路 用jQuery将元素移除的基本方法常用的有三个,一个是remove()方法,一个是html()方法,一个是empty()方法.我们可以对此三个方法进行进一步的封装,我们会在

Js操作DOM元素及获取浏览器高宽的简单方法_javascript技巧

在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. 通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性.可以对其中的内容进行修改和删除,同时也可以创建新的元素.HTML DOM 独立于平台和编程语言.它可被任何编程语言诸如 Java.JavaS

JS获取元素多层嵌套思路详解_javascript技巧

如果一段html嵌套过多,在js中获取还是比较麻烦的,我写了几套方案,大家可以参考参考,如果你有好的方法,也分享出来,让我们瞧瞧. HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素多层嵌套,JS获取问题</title> </head> <body> <div