阻止子元素继承父元素事件具体思路及实现
<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;
}
}
相关推荐
-
阻止子元素继承父元素事件具体思路及实现
复制代码 代码如下: <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&qu
-
Javascript中找到子元素在父元素内相对位置的代码
经过自己一晚上尝试,貌似找到了一个方法. 现在脑袋还糊涂,先记下来,以后再分析. 复制代码 代码如下: // 找到子元素在父元素中的相对位置 function getElementTop(element){ var el = (typeof element == "string") ? document.getElementById(element) : element; if (el.parentNode === null || el.style.display == 'none')
-
高效的获取当前元素是父元素的第几个子元素
例如处理事件的时候,有时候需要知道当前点击的是第几个子节点,而HTML DOM本身并没有直接提供相应的属性,需要自己来计算. 从一个索引序号,很容易得到该索引对应的子节点或者子元素,直接用parentNode.childNodes[index] 或 parentNode.children[index] 就行. 但反过来,已知一个节点或元素对象,要知道它的索引序号则没有那么直接了. 一些特殊的元素,HTML DOM有对应的属性表示其索引序号,主要是表格的TD 和 TR 元素. 表格单元格TD元素有
-
jQuery移除元素自动解绑事件实现思路及代码
世界本该如此! 所以,在现代浏览器,如果你将一个元素从DOM树种进行移除的时候,浏览器会自动帮你绑定的事件进行解绑以释放其占用的内存.也许你猜到了,较老版本的浏览器则不会主动去做这件事,所以,当你的应用在较老版本的浏览器运行的越久,其消耗内存越多,应用就会变得越来越卡.因此,需要我们自己对要删除的元素进行事件解绑. 实现思路 用jQuery将元素移除的基本方法常用的有三个,一个是remove()方法,一个是html()方法,一个是empty()方法.我们可以对此三个方法进行进一步的封装,我们会在
-
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(); });
-
子窗口给父窗口赋值实现思路及案例演示
今天Insus.NET练习JavaScript,实现从父窗口打开一个子窗口,在子窗口处理一些结果之后,把结果赋值于父窗口的文本框内.可看效果: 在站点创建两个aspx页面,一个是PageA.aspx另一个是PageB.aspx: 在PageA.aspx的<head>节点内,写Javascript脚本,脚本有两个方法,一个是打开子窗口,一个是为文本框设值的方法: 复制代码 代码如下: <script type="text/javascript"> functio
-
js与jquery获取父元素,删除子元素的两种不同方法
var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id");得到的是jquery对象,对该对象进行操作的时候使用jquery方法 1.对于上面获得的对象进行遍历 (1).js方法 for(vat i=0;j<obj.length;i++){ obj[i] 来获得对应的某一个元素} (2).jquery方法 $("#id").each
-
vue递归获取父元素的元素实例
使用递归查找父元素,知道查到想要的元素,然后return getParentTag(startTag) { var self = this; // 传入标签是否是DOM对象 if (!(startTag instanceof HTMLElement)) return; // 父级标签是否是body,是着停止返回集合,反之继续 let nodeName = ""; if (startTag.parentElement) { nodeName = startTag.parentElemen
-
Jquery搜索父元素操作方法
本文实例讲述了Jquery搜索父元素操作方法.分享给大家供大家参考.具体分析如下: 1. parents()方法 格式: 复制代码 代码如下: parents([selector]) 用于获取当前匹配元素集合中每个元素的祖先元素,根据需要还可以使用一个选择器进行筛选. 如: 复制代码 代码如下: $("p").parents().css("border", "1px solid blue); 2. cloest方法 格式: 复制代码 代码如下: close
-
javascript创建元素和删除元素实例小结
本文实例讲述了javascript创建元素和删除元素.分享给大家供大家参考,具体如下: 1.创建元素 动态创建新的DOM元素,是js操作网页对象模型的重要手段之一. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 创建新元素</title> <script type=&qu
随机推荐
- ExtJS4利根据登录后不同的角色分配不同的树形菜单
- 利用matplotlib+numpy绘制多种绘图的方法实例
- windows 中 \r\n 区别于 类unix中的\n 疑问理解(crlf回车换行)
- 用批处理实现映射盘网络盘为固定盘符,请更改冲突的硬盘盘符
- SQL2008中SQL应用之- 死锁(Deadlocking)
- Linux 环境下编译安装MySQL5.6的笔记记录
- iOS实现视频压缩上传实例代码
- thinkphp框架下404页面设置 仅三步
- ASP中FSO的神奇功能 - 简介
- c#窗体传值用法实例详解
- 说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
- CSS小例子(只显示下划线的文本框,像文字一样的按钮)
- 用户体验第一 font-size放弃px选择em
- jQuery如何将选中的对象转化为原始的DOM对象
- php中对xml读取的相关函数的介绍一
- 简单介绍区分applet和application的方法
- iOS应用中使用Auto Layout实现自定义cell及拖动回弹
- Android编程获取网络连接方式及判断手机卡所属运营商的方法
- PHP排序算法系列之桶排序详解
- Matlab实现数据的动态显示方法