首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

准确获取事件源任意元素(事件委托)

通常我们都会使用事件源e.target来获取点击元素,从而可以知道我们点击是谁。...需要实现功能是,点击这个盒子区域,输出对应li对应id,下面是这个li对应代码片段,很显然在li内部存在着大量元素,我们需要通过给li元素ul绑定事件,从而实现事件委托,那么我们该如何确定我们点击元素属于哪一个...li了,从而导致我们获取不到id无从下手 解决方法 下面通过另一种方法很好解决了这个问题 在我们事件对象event中,存在着一个方法path,这个方法可以返回事件触发所有元素,我们可以使用这个方法...我们先通过e.path获取到事件触发对象所有的所有元素,这个方法返回值是一个数组,我们可以通过数组中find方法按照我们需求选择我们想要元素,在下面的代码中,我们先给每一个li添加一个特有的标志属性...,整个方法核心就是通过获取到触发事件元素所有元素集合,再通过筛选从而获得元素

2.6K30
您找到你想要的搜索结果了吗?
是的
没有找到

JS和JQuery获取当前元素兄弟及级等元素方法

) jQuery.parents(expr),类似于 jQuery.parents(expr) ,但是是查找所有祖先元素,不限于元素 jQuery.children(expr),返回所有子节点,这个方法只会返回直接孩子节点...,而 jQuery.find(),返回结果,不会有初始集合中内容,比如 $("p").find("span") ,是从 元素开始找 ,等同于 $("p span") JS获取:...var chils= s.childNodes;  //得到s全部子节点 var par=s.parentNode;   //得到s节点 var ns=s.nextSibling;   //获得...;   //获得s最后一个子节点 JS获取节点级,子级元素:JS方法会比JQUERY麻烦很多,主要则是因为FF、谷歌浏览器会把你换行也当作DOM元素:空text元素,目前IE也是这样       原生JS获取ID为test元素元素

12.5K10

JS获取节点兄弟,级,子级元素方法

2015-08-18 03:48:27 下面介绍JQUERY,子,兄弟节点查找方法 jQuery.parent(expr)  找父亲节点,可以传入expr进行过滤,比如$("span").parent...()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于元素 jQuery.children...(expr).返回所有子节点,这个方法只会返回直接孩子节点,不会返回所有的子孙节点 jQuery.contents(),返回下面的所有内容,包括节点和文本。...(),返回所有之前兄弟节点 jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点 jQuery.nextAll(),返回所有之后兄弟节点 jQuery.siblings(),返回兄弟姐妹节点...jQuery.filter()是从初始jQuery对象集合中筛选出一部分,而jQuery.find()返回结果,不会有初始集合中内容,比如$("p"),find("span"),是从元素开始找

9.2K10

超强 Anchor Positioning 点定位

Anchor Positioning(点定位)允许我们基于其它元素位置和尺寸去定位上下文,而不是传统意义上基于元素去进行绝对定位。...其重点总结如下: 首先,点定位,需要我们通过新点名称(anchor-name)来标记元素,允许我们使用这些经过了标记元素作为我们绝对定位基准目标; 其次,我们可以在绝对定位元素上,通过新语法...anchor() 或者 anchor-size() 来锚定上述被标记元素,并且可以使用被标记元素相应属性(譬如被标记元素 top、left、right、bottom 等) 并且,还有一些更高级用法...Anchor Positioning(点定位)允许我们基于其它元素位置和尺寸去定位上下文,而不是传统意义上基于元素去进行绝对定位。...,那么弹框也就实现了动态定位 知识补充,:has 选择器变相让 CSS 拥有了选择器能力,此选择器用于选择包含指定子元素元素,而本例中,利用了 :has 选择器甚至能选择包含指定伪类状态能力

35130

D3.js仪表盘实现

一开始,是用Echarts来实现仪表盘,但是它无法满足上面的两点需求。所以后来改成用D3.js。 D3.js可以完美地实现图表定制,从细节上,完美地满足我们需求。...获取SVG元素,并且转换原点到画布中心,这样我们在之后创建圆弧时就不需要再单独指定它们位置了 var svg = d3.select("#myGauge") var g = svg.append("...g.append("text").attr("class", "gauge-title") .style("alignment-baseline", "central") //相对元素对齐方式...("alignment-baseline", "central") //相对元素对齐方式 .style("text-anchor", "middle") //文本点,居中 .attr...") .style("alignment-baseline", "central") //相对元素对齐方式 .style("text-anchor", "middle") //文本

7.5K20

web前端必备英语词汇都在这儿了,客官你了解多少?

absolute 绝对 active 活动,激活标记一个伪类 align 对齐 alpha 透明度,半透明anchor 标记是这个单词缩写 anchor 记a标记是这个单词缩写...close 关闭当前页面 confirm 输入框 clientWidth 获取元素宽度 clientHeight 获取元素高度 childNodes 获取所有子节点 children 返回子元素 cloneNode...open 打开新页面 onscroll 窗口滚动事件 onresize 窗口大小监听事件 onload 图片加载事件 offsetLeft 获取元素距离左侧距离 offsetTop 获取元素距离顶部距离...pageY 光标相对于该网页垂直位置 port 端口 protocol 协议 prompt 提示框 parentNode 返回级节点 parentElementNode 获取已知节点节点 previousSibling...选项 Q: quadratic 二次方缓动 quintic 五次方缓动 quartic 四次方缓动 querySelector 根据标签名获取第一个元素 querySelectorAll 获取所有标签名元素

3K20

HTML笔记

作用:表示网页头部 作用:表示网页身体,以后页面中所有的要显示内容,都要写在body标签里HTML语法 标记语法 标记又叫标签或者元素,在网页中表示一些功能...doctype html> 标签嵌套 在一个标签中,出现另外一个标签,从而形成层叠关系,里面的标签又称为“子标签”,外面的标签又称为“标签” 推荐写法: 在子元素前,... 目录,先返回,再使用 .....实现步骤: 第一步:定义点 方式一:使用任意标签id属性定义点 化妆品区域 方式二:使用a标签name属性,定义点 化妆品区域... 第二步:链接到点 化妆品 4、返回顶部 返回顶部 块级元素和行内元素 块级元素 在网页中独占一行,可以设置宽高 比如<

2.3K30

你了解CSS吗?——rules汇总(上)

正文 大家好,是fire,上一篇汇总了At-rule内容,这一篇我们汇总一下rules部分。...4目前还处于Editor's Draft(编辑草案) 阶段,估计短时间内还无法完成,所以接下来汇总主要是通过对Selectors Level 3规范查询。...选中E元素元素唯一子元素(唯一表示”元素不包含其他子元素“) E:only-of-type 选中E元素元素下唯一类型元素(唯一类型表示”元素下不包含其他该类型元素,可以包含其他类型元素...“) E:empty 选中一个没有子元素E元素(包括文本节点) E:link 选中E 元素是其目标尚未访问超链接元素 E:visited 选中E 元素是其目标已访问超链接元素...E:active 选中鼠标点击状态下E元素 E:hover 选中鼠标悬停状态下E元素 E:focus 选中获取焦点状态下E元素(比如表单输入元素) E:target 选中作为点目标的E元素 E:

77700

React项目中如何实现一个简单点目录定位

Anchor This is anchor ) } scrollIntoView可以让元素容器自动滚动...问题解析 遮挡问题 有时点会被固定Header遮挡,此时滚动会定位到元素上方,用户看不到点对应内容。...常见解决方案是: 设置元素margin-top #anchor { margin-top: 80px; /* header高度 */ } 直接设置一个和Header高度相同margin,来防止遮挡...但是在Next.jsSSR环境下就会有问题: 点击目录链接时,页面不会滚动。 这是因为在服务端,我们无法获取组件ref,所以元素不存在,自然无法定位。 滚动页面时,目录高亮也失效。...服务端渲染静态HTML中,并没有绑定滚动事件,所以无法自动高亮。 预取数据 首先,我们需要解决点击目录链接问题。 既然服务端无法获取组件ref,那就需要在客户端去获取元素位置。

93620

HTML基础知识巩固你基础

HTML基础知识 HTML历史:HTML,XHTML HTML全局属性:全局标准属性,全局事件属性 HTML元素标记语言...HTML,为超文本标记语言。 XHTML是可扩展超文本标记语言,是一种更纯洁,更严格,更规范 html代码。...值 说明 _self 在超链接所在框架或窗口中打开目标页面 _blank 在新浏览器窗口中打开目标页面 _parent 将目标页面载入含有该链接框架框架集或窗口中 _top 在当前整个浏览器窗口中打开目标页面...点链接是用 #+对应点,点通常用唯一属性值 id设定。 图像热区链接 图像热区链接,是什么呢?...将标签usemap属性与标签name属性相关联。 为了证明学会了,写一个html页面。

2.1K10

基于iframe移动端嵌套

每点击一次加载一个新iframe,比较懒,所以两个新页面也做成了iframe,在做过程中出现了如下问题,这里总结一下: 1.嵌入iframe页面无法滚动 2.meta元素ontent不一致,...解决办法是在原项目下页面html,body依旧设置为100%,而初始化时候js获取屏幕宽度再设置body宽度。...4.iframe页面a标签点失效 若iframe不涉及跨域,网上有兼容代码可以重新设置a标签,跨域解决不了,因为跨域情况下,外部页面是无法获取到iframe下元素,最后这个导航做了外部跳转。...6.页面点击跳转之后,返回状态标记 使用了localStorage记录了url,navIndex 7.某个安卓机后返回无法重新加载iframe 返回后再appendiframe代码下再让其重新渲染下...$("#iframe").attr("src",url).ready() 8.其他 获取iframe内部元素 document.getElementById('iframe').onload = function

3.6K60
领券