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

js判断是否元素

文本俺将跟大家介绍,如何判断一个当前点击的元素,是否指定元素的子元素。 解决思路: 俺给父元素指定了一个id,并使用这个循环检查当前元素是否属于它的子元素。...:当前元素是否被筛选元素的子元素 jQuery.fn.isChildOf = function(b){ return (this.parents(b).length > 0); }; //判断:当前元素是否被筛选元素的子元素或者本身...方法三: const isDescendant = (el, parentId) => { let isChild = false if (el.id === parentId) { //判断是否其本身...event => { const parentId = 'mycontainer' if (isDescendant(event.target, parentId)) { //处理元素的情况...该解决思路,常见的解决办法,大家可以拿小本本记好了~类似于不停向上找。

10.7K00
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    js判断数组中是否包含元素的方法有哪些_js判断数组里面是否包含某个元素

    方法一: arr.indexOf(元素):未找到则返回 -1。...实际用法: if(arr.indexOf(元素) > -1){ //则包含该元素} 1 例: var fruits = ["Banana", "Orange", "Apple", "Mango...(v=>{ if(v === 查找值) { //则包含该元素 } }) 别的做法: js中存在一个数组,如何判断一个元素是否存在于这个数组中呢,首先是通过循环的办法判断,...indexOf方法来判断,如果元素存在于数组中,那么返回元素在数组中的下标值,如果不存在,那么返回-1,注意indexOf区分大小写的,字母O必需大写,不然会报错的,另外,该方法在某些版本的IE中不起作用的...,因此在使用之前需要做一下判断,修改后的代码如下所示: /** * 使用indexOf判断元素是否存在于数组中 * @param {Object} arr 数组 * @param {Object} value

    10K60

    js判断页面是否通过浏览器后退按钮返回打开的

    这样子就产生了一个问题,点击身份的时候会生成新的token,但是页面允许返回的所以url地址栏中的历史token还在,所以就会基于这个token触发请求导致接口报了Token验证失败的错误,一番搜索之后终于找到了解决办法...解决方法 利用浏览器的window.performance.navigation.type属性 window.performance.navigation.type window.performanceW3C...(用户通过刷新,包括JS调用刷新接口等方式访问页面) 2 : TYPE_BACK_FORWARD Navigation where the history handling behavior is set...(用户通过后退按钮访问本页面) 255 : TYPE_RESERVED Any navigation types not defined by values above....所以我们只要判断type属性为2时就可以知道页面通过返回按钮打开的了,然后开头的问题就可以据此加判断来解决token异常了。 ?

    16.9K20

    JS事件篇

    支持IE8及以下的浏览器 兼容上面两者的写法 事件的传播 拖拽案例---鼠标按下,移动,松开事件 鼠标滚轮事件----onmousewheel----火狐不支持,由DOMMouseScroll替代 判断滚轮上还是下...修改元素样式的一些思考 JSON JSON字符串转化为JS对象 JS对象转换为JSON字符串 eval函数 ---- window.onload:事件 浏览器加载一个页面时,按照自上而下的顺序加载的...,#标签内置的一个方法,用这种方法点击后网页后返回到页面的最顶端所以又有了“##”“#!”...div绑定一个鼠标滚轮事件 addEventListener("DOMMouseScroll",function(){ alert("鼠标滚轮"); },false) ---- 判断滚轮上还是下...document.getElementById("d1"); //为div绑定一个鼠标滚轮事件 addEventListener("DOMMouseScroll",function(event){ //判断滚轮向上

    12.6K10

    吸顶效果解决方案

    一.场景 “吸顶”一种比较老的交互方式,在PC页面已经用了很多年了,如图: sticky 吸顶元素的初始位置一般靠近页面顶部,但与顶部有一定距离,这块区域放的最醒目的元素,比如Banner图...页面向下滚动超过吸顶元素初始位置时,把吸顶元素固定在顶部 要求吸顶的元素一般二级导航栏、搜索框、文章标题栏(h1)、表头(thead)、tab条等等,共同特点在内容或功能上比较重要,但又不是最重要的元素...(最重要的元素通常固定在页面顶部,navbar-fixed-top) 二.PC解决方案 页面动到一定位置时,做一些事情 “回到顶部”按钮也是这样的,页面向下滚动超过150px时,显示该按钮,否则隐藏...监听滚动判断位置的方法完全失效,平滑吸顶效果变成了过临界位置直到停止滚动时,吸顶元素跳到目标位置,体验非常差,不可忍受 scroll不能用,但还可以有一些奇怪的思路,比如定时器读scrollTop,touchmove...static能为后代元素提供定位参照),但top和left无效 过初始位置时,和position: fixed表现类似,top和left生效,固定在屏幕可见区域,但页面不会抖动,原本占据的空间还在(自带守家占位符的感觉

    3.5K10

    Js处理滚动条和日期框

    有2种方式 1.通过Js处理滚动条 如果将元素动到可见区域之后,再去操作它,也就是处理这个滚动条。...滚动条不是html页面元素,它是浏览器的元素。想获取浏览器的元素,就不能走常规套路啦,要通过javascript来执行。 不是所有的元素都一定要拖动到可见区域才能操作的。...例如百度搜索中,最后选择这个页面跳转: ? 例如底部的页面跳转:有的系统,虽然进来这个地方,想操作页面底部的元素,可以操作,也不需要拖动滚动条,它会自动将它拖动到可见区域,然后去操作它。...例如元素页面正中间,想将它滚动到可见区域,必须有向上和向下这2种做法。 如果你希望他向上。 一种,.scrolllntoView()默认跟页面顶部对齐: ?...用driver.find_element()去找到这个元素,在页面上看到有文本内容的,但是通过driver.find_element().send_keys()或者.text得不到内容。

    10.9K10

    【兼容性】H5滚动穿透解决方案

    属性 监听回调 设置了 preventDefault 已经滚动到底端或顶端 为什么会觉得这个这个行为合理性,我的理解 用户产生滚动行为,浏览器就必须要响应这个行为,产生滚动的反馈,这才是正常的。...,但是直接给 html 设置 absolute 风险太大,容易埋坑,不太建议大项目使用,小应用还是可以的,我在需求的小活动页7就使用过这种方式 5禁用页面滚动 除了在 css 限制页面滚动,还可以从 js...,当元素动到顶部和底部的时候,再滚动,仍然会触发document 滚动 为什么呢?...这个问题测试了,只在 ios 中存在,滚动穿透的顺序 子->父->document,而 安卓和 鸿蒙 则不会,子不了,直接document 这个实际的dom 父子关系才会,视觉上的 父子关系没有这个问题...(手没有离开屏幕)导致元素动到顶部或者 底部之后,如果手还在屏幕上往两端滑,并不会触发滚动穿透 如果你把元素动到 两端不可之后,抬起手,再按下去,往不可的方向移动,此时才会发生 滚动穿透 之前我们说了

    5.8K20

    JS延时判断,改善中国博客联盟展示导航自动点击的灵敏度

    说到 JS 延时点击,度娘给出的结果几乎都是 js 的延迟点击 Demo,即鼠标产生一个 mousehover 事件之后,延迟多少秒执行点击动作。...本文主要分享一个带时间判断js 延时自动点击效果:当鼠标经过页面元素,也就是产生一个 mousehover 事件时,触发 js 计时器,若经过指定时长后,鼠标还在这个元素上,将执行点击动作,否则计时器就清零...张戈研究这个 JS 特效的原因就是,博友 ijustplay 在我博客留言,说联盟的按钮太灵敏了,往往鼠标从浏览器标签页移动到联盟导航,想点击某个博客时,因为经过了导航的菜单,导致导航子页面的切换,体验不是很好...在我同事的指点下,终于实现了这个带判断的延时点击效果。 以下示例代码: <!...效果:拖动鼠标自然经过成员导航的菜单按钮,不会产生点击动作的,只有停留在菜单按钮才会生成点击动作。

    2.2K40

    3分钟搞定图片懒加载

    为什么需要懒加载 对于一个页面加载速度影响最大的因素之一就是图片资源,如果一个页面图片太多(比如宝,东等),整个页面的图片大小可以到达几百兆,即使在百兆宽带,全部下载的话,也需要上十秒的时间,这对于用户耐心的考验巨大的...如何判断一个元素是否在视口内呢? 通过getBoundingClientRect()方法来获取元素的大小以及位置。...提示:src的赋值在js原生和jq不同的,混用的话不会生效。...思路:当页面滚动的时候需要去监听scroll事件,在scroll事件的回调中,判断滚动条是否滚动到最底部,如果,则将将图片的 src 属性设置为data-src的值。...判断是否滚动到最底部的方法:滚动条到顶部距离 + 可视页面高度 >= 当前页面高度 var seeHeight = document.documentElement.clientHeight; // 可视页面高度

    2.4K20

    JavaScript(进阶)

    判断滚动条是否滚动到底 垂直滚动条 scrollHeight - scrollTop = clientHeight 1 复制 ---- # 文档的加载 浏览器在加载一个页面时,按照自上向下的顺序加载的...如果将js代码编写到页面的上边,当代码执行时,页面中的DOM对象还没有加载,此时将会无法正常获取到DOM对象,导致DOM操作失败。...事件委派利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能 利用event中的target判断:如果触发事件的对象是我们期望的元素,则执行否则不执行 # 事件的绑定 使用 对象.事件 = 函数...//向上 -3 向下 3 //判断鼠标滚轮滚动的方向 if(event.wheelDelta > 0 || event.detail < 0){ //向上 }else{ //...newValue > target)) { newValue = target; } //将新值设置给box1 obj.style[attr] = newValue + "px"; //当元素动到

    1.5K20

    用 Puppeteer 实现简书文章备份

    读了篇文章 《前端使用 puppeteer 爬虫生成《React.js 小书》PDF并合并》。参照这个思路,可以用 Puppeteer 备份简书的文章。 呈现效果: ?...生成一个导航页面。该页面上的链接,可以看到每篇文章截图。 主要的实现代码 抓取该用户所有的文章。需要程序将页面动到底部,去拿所有文章。...代码如下: let articles = await page.evaluate(async () => { // 将页面动到最底部 await new Promise((resolve, reject...img.addEventListener('load', resolve); img.addEventListener('error', resolve); // 也算成功吧 }); })) 下载篇文章...解决方案: 程序将页面往下每过一段时间往下,滚动到不能滚动为止。 pfd 里插图片的问题 开始想做一篇文章生成一个PDF,然后把所有的PDF再拼成一个PDF的。

    1.4K20

    selenium 常见面试题以及答案

    大家好,又见面了,我你们的朋友全栈君。selenium 常见面试题以及答案 1.怎么 判断元素是否存在?...判断元素是否出现,存在两种情况,一种元素压根就没有,自然不会出现;另外一种有这样的元素,但是hidden状态 可以通过先判断是否存在,如果不存在返回false;如果存在再去判断是否displayed...这样的错误, 大意,当要点击到达城市输入框,其实是被上层的元素遮挡,没法使用click方法,但是可以使用Actions的moveToElement方法之后可以click 或者采取滚动到元素,调用JS...因为如果页面没有完全显示,element如果在下拉之后才能显示出来,只能先滚动到元素才能进行click,否则是不能click操作 1 2...因为如果页面没有完全显示,element如果在下拉之后才能显示出来,只能先滚动到元素才能进行click,否则是不能click操作 1 2

    3.2K20

    学习滚动插件iScroll的简单使用

    iscroll-probe.js,探查当前滚动位置一个要求很高的任务,这就是为什么我决定建立一个专门的版本。如果你需要知道滚动位置在任何给定的时间,这是iScroll给你的。...iscroll-infinite.js,可以做无限缓存的滚动。处理很长的列表的元素为移动设备并非易事。 iScroll infinite版本使用缓存机制,允许你滚动一个潜在的无限数量的元素。...iScroll使用 页面引用 HTML结构 ...scrollBy(x, y, time, easing) 滚动到某个元素scrollToElement(el, time, offsetX, offsetY, easing) ;el:为必须的参数;offsetX...设为 true 即为屏幕中心 分割页面 snapgoToPage(x, y, time, easing)根据 options.snap 分割页面,跳转到横向、纵向页。 XY 可以同时生效。

    2.9K30

    页面滚动,元素跳动;附带jquery.scrollex.js插件

    有些动画页面一加载就要的,还有一些动画需要页面动到那个元素才要展示的。 本文以模板之家的 “全屏Story日记本个人主页自适应模板”为例,解析这两种动画实现的方式之一。...滚动到要实现动画的元素时(is-inactive): 其实和上面的意思一样: 在未滚动到元素时,显示假位置。...当滚动到元素时,去掉class:is-inactive 而监听滚动事件和判断是否去掉class:is-inactive 使用的jquery.scrollwx.js插件 二、使用方法 要使用这个...jQuery插件,需要在页面中引入jquery(1.11+)和jquery.scrollex.js文件。..." src="js/jquery.scrollex.js"> 调用插件 在页面DOM元素加载完毕之后,你可以通过scrollex()方法来初始化插件。

    5.6K10

    JQuery-命令速查-CheatSheet

    select attributes into an array 页面控制 滚动到对应位置 事件绑定与解绑 AJAX 文件上传 关于 attachEvent 报错 Error Msg Desc...class 为 rain 的元素对它的子集操作 filter() 则是筛选 div 的 class 为 rain 的元素对它自身集合元素筛选 ---- submit a form in...滚动到对应位置 可以对单个 Elem 进行滚动,或者对 window 进行滚动 可以滚动到对应 y 轴位置,数字作为参数,也可以滚动到对应 elem $('#BoxModalContent').scrollTop...默认地,jQuery 将智能判断。...规定添加到元素的一个或多个事件。 由空格分隔多个事件。必须有效的事件。 data 可选。规定传递到函数的额外数据。 function 必需。规定当事件发生时运行的函数。

    9.7K30
    领券