e.preventDefault() -将其应用于除一个div之外的所有div时出现的问题

e.preventDefault()是一个JavaScript事件处理函数，用于阻止默认的事件行为。当应用于除一个div之外的所有div时，可能会出现以下问题：

事件冒泡问题：当在一个父元素上绑定了e.preventDefault()，但是子元素也绑定了相同的事件，并且没有阻止事件冒泡，那么父元素的e.preventDefault()将无效，子元素的默认事件行为仍然会触发。

解决方法：在子元素的事件处理函数中，使用e.stopPropagation()来停止事件冒泡，确保父元素的e.preventDefault()生效。

多个div绑定相同事件时的问题：如果多个div都绑定了相同的事件，并且都使用了e.preventDefault()，那么只有第一个div的e.preventDefault()会生效，其他div的默认事件行为仍然会触发。

解决方法：可以通过给每个div添加唯一的标识符或类名，然后使用事件委托的方式，在父元素上绑定事件处理函数，并在函数中根据事件目标的标识符或类名来判断是否执行e.preventDefault()。

事件绑定顺序问题：如果在多个div上绑定相同的事件处理函数，并且其中一个div在后面绑定了e.preventDefault()，那么无论事件触发在哪个div上，都会执行e.preventDefault()。

解决方法：可以通过在事件处理函数中判断事件目标，只在特定的div上执行e.preventDefault()，而不是所有div。

腾讯云相关产品和产品介绍链接地址：

腾讯云函数（云函数）：https://cloud.tencent.com/product/scf

腾讯云事件消息队列（CMQ）：https://cloud.tencent.com/product/cmq

腾讯云云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm

腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke

腾讯云云联网（CCN）：https://cloud.tencent.com/product/ccn

腾讯云云安全中心（SSC）：https://cloud.tencent.com/product/ssc

腾讯云云直播（CSS）：https://cloud.tencent.com/product/css

腾讯云云点播（VOD）：https://cloud.tencent.com/product/vod

腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai

腾讯云物联网通信（IoT）：https://cloud.tencent.com/product/iot

腾讯云移动推送（TPNS）：https://cloud.tencent.com/product/tpns

腾讯云云硬盘（CFS）：https://cloud.tencent.com/product/cfs

腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs

腾讯云腾讯会议（Tencent Meeting）：https://cloud.tencent.com/product/tencentmeeting

相关·内容

从零开始学 Web 之 HTML5（四）拖拽接口，Web存储，自定义播放器

示例：将一个div中的p标签拖拽到另一个p标签中 <!...遗留问题：如果有多个 div，那么每个 div 都必须写 ondragover 和 ondrop 事件触发的处理函数，也就是只能拖拽指定的元素到指定的元素中，这样代码的可用性就很低了。...：删除数据，通过指定名称key删除对应的值， clear() ：清空所有存储的内容。...):删除数据，通过指定名称key删除对应的值 clear():清空所有存储的内容示例： <!...注意：jQuery中没有提供对视频播放控件的方式，所以如果使用jQuery操作元素，必须将其转为原生 js 的方式来调用这些方法。

1.5K2 0

在 Vue 中，使用 $attrs 构建高级组件

对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute，例如 class，style，v-on 监听器等等。...对象中不包含 class 属性而 Vue3 中的 attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute，这有利于我们方便使用这些属性。...解决上述问题的最好方法是找到一种方法，将所有的属性、类、参数和事件直接 "应用" 到 input 字段上，而不需我们手动的一个个声明。这就是 $attrs 出场的地方。...$attrs 救场在本文的开头，我们介绍了 $attrs。它是一个存放所有 "未声明"的属性和事件的地方，而这正是我们需要解决的问题。...为了关闭这个功能，并控制哪些元素可接受这个额外的属性，我们可以使用一个名为 inheritAttrs 的标志，并将其设置为false。经过这样的改变，我们的HTML就变得漂亮且干净了。

2.4K1 0

HTML5-拖拽

将div中元素拖到另一个中 <!...=document.querySelector("#div1"); /*应用于被拖拽元素的事件 *ondrag 应用于拖拽元素，整个拖拽过程都会调用--持续 ondragstart.../*如果想触发ondrop事件，那么就必须在这个位置阻止浏览器的默认行为*/ e.preventDefault(); } /*浏览器默认会阻止ondrop事件：我们必须在...事件，那么就必须在这个位置阻止浏览器的默认行为*/ e.preventDefault(); } div1.ondrop=function(){ console.log...*/ e.preventDefault(); } /*浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为*/ document.ondrop

9062 0

【总结】1823- 移动端滚动穿透与滚动溢出解决方案

滚动穿透问题描述在移动端 WEB 开发的时候（小程序也雷同），如上录屏所示，如果页面超过一屏高度出现滚动条时，在 fixed 定位的弹窗遮罩层上进行滑动，它下面的内容也会跟着一起滚动，看起来好像事件穿透到下面的...案例伪代码点击出现弹窗 <div class...于是在 popup 元素上设置该属性，禁用元素（及其不可滚动的后代）上的所有手势就可以解决该问题了。...✅ 解决方案B (event.preventDefault) 来自 W3C 的一个标准。...✅ 解决方案B (event.preventDefault) 借用 event.preventDefault 的能力，当组件滚动到底部或顶部时，通过调用 event.preventDefault 阻止所有滚动

5661 1

蒙层禁止页面滚动的方案

当弹出蒙层时禁止蒙层下的页面滚动，也可以称为滚动穿透的问题，文中介绍了一些常用的解决方案。...实现首先需要实现一个蒙层下滚动的效果示例，当我们点击弹窗按钮显示蒙层之后，再滚动鼠标的话能够看到蒙层下的页面依旧是能够滚动的。...，所以在设置这个样式的时候滚动条会消失，而移除样式的时候滚动条又会出现，所以在视觉上是会有一定的闪烁现象的，当然也可以定制滚动条的样式，但滚动条样式就是另一个兼容性的问题了，还有同样是因为裁剪。...，反之就不做控制，之后又出现了问题，需要判断滚动到顶部和滚动到底部的时候禁止滚动，否则触碰到上下两端，弹窗可滚动区域的滚动条到了顶部或者底部，依旧穿透到body，使得body跟随弹窗滚动，这样的话逻辑的复杂程度就比较高了...，要阻止页面滚动，可以将其固定在视图中即position: fixed，这样它就无法滚动了，当蒙层关闭时再释放，当然还有一些细节要考虑，将页面固定视图后内容会回头最顶端，这里我们需要记录一下用来同步top

6.3K2 1

如何用120行代码，实现一个交互完整的拖拽上传组件？

一个完整拖拽上传行为覆盖的四个事件：dragover、dragenter、drop、dragleave 如何使用React Hooks编写自己的UI组件库。逛国外社区时看到这篇： ?...于是我又用React Hooks 重写了一版，除CSS的代码总数 120行。效果如下： ? 1....React Hooks中新增了useRef API 语法 const refContainer = useRef(initialValue); useRef 返回一个可变的 ref 对象，。...不阻止的话，就会触发打开文件的行为，这显然不是我们想看到的。 ? 4. 组件内部状态: useState 拖拽上传组件，除了基础的拖拽状态控制，还应有成功上传文件或未通过验证时的消息提醒。...需要第二个叠加层除了drop事件，另外三个事件都是动态变化的，而在拖动元素时，每隔 350 毫秒会触发 dragover事件。此时就需要第二ref来统一控制。

1.9K3 0

一次关于js事件出发机制反常的解决记录

起因：正常情况下我点击s2时是先弹出我是children，再弹出我是father，但是却出现了先弹出我是father，后弹出我是children的情况，这种情况是在和安卓app交互的h5页面中出现的，本地测试没有问题...，但是在安卓打包的内嵌h5页面就出现了问题。...// useCapture ：是否使用捕捉，一般用 false,事件触发时，会将一个 Event 对象传递给事件处理程序。...这个类别中的事件被认为是可取消的，他们取消的行为被称为他们的默认行为。取消事件：可取消的事件对象可以与一个或多个“默认动作”相关联。要取消事件，请调用该preventDefault()方法。...：让我们回顾一下最初的问题，可能部分浏览器把事件的useCapture默认为true，导致点击子元素时父元素的事件先响应了，于是我的办法是在父元素的事件里进行判断比如容器为#a，动态插入的元素为#b

1.5K5 0

使用 :has() 选择前一个相邻元素

:where():is() 截至撰写本文时，所有主要浏览器（包括 Chrome 和 Safari）都:has()支持它，但 Firefox 是一个明显的例外。...相邻同级组合器( +) 可以选择紧随另一个元素的元素，我们可以将其与:has()该元素组合以仅选择.box紧随 a 的元素.circle（或者从圆的角度来看，其前一个同级）： .box:has(+ .circle...可以将其视为选择所有框 ( .box)，然后过滤这些元素，以便剩下的元素.box与模式“self + box + Circle”匹配，这将只是前第二个同级元素。...circle.box 选择除最相邻的兄弟姐妹之外的所有先前兄弟姐妹#https://tobiasahlin.com/blog/previous-sibling-css-has/#selecting-all-preceding-siblings...- except-the-most-adjacent-sibling 最后，我们可以将通用同级组合器 ( ~) 与相邻同级组合器 ( +) 组合起来，并选择除最相邻的元素之外的所有前面的元素： .box

3473 0

【HTML5】逐步分析如何实现拖放功能

一、什么是拖放拖放就是通过鼠标放在一个物体上，按住鼠标不放就可以把一个物体托动到另一个位置。其实我们平时一直都有接触，如图 ? 那么在网页上其实也可以实现同样效果的拖放功能，如图 ?...，那么我们来了解一下（1）被拖动元素的事件被拖动元素所支持的事件如下表所示事件含义 dragstart 准备拖动被拖动元素时触发 drag 拖动的过程中触发（频繁触发） dragend 拖动结束时触发...虽然任何元素都支持该事件，但是所有元素默认都是不允许被放置的，所以在不做任何处理的情况下，该事件是不会触发的同样的，我们来用具体的例子，先来体会一下前三个事件 <!...，这个两个属性需要搭配使用，它们决定了被拖放元素和目标元素之间的关系的，当设定好两者的关系后，在进行拖动操作的时候，鼠标会根据不同的关系显示不同的样式，除此之外，没有别的特别的作用。...下面来看一个拖放实例：需求：将一段文本拖放到一个元素中因为文本是默认支持的拖放元素，所以我们可以不对其做任何的事件绑定。 <!

1.5K1 0

【React】282- 在 React 组件中使用 Refs 指南

传递给 div 接下来，让我们看一个在 React 组件中使用 refs 的示例。...首先，我们在构造方法中创建一个 ref 实例，并将其赋值给 this.textInput，然后通过 ref 属性将其分配给 input 元素。...当我们设置 ref 时，React 会调用这个函数，并将 element 作为第一个参数传递给它。这是另一个例子的代码。...当组件安装时，React 会将 DOM 元素传递给 ref 的回调；当组件卸载时，则会传递 null。...…rest 是 props 的解构（也就是说，我们会将 rest 数组中的所有参数作为 props 传递给 input 组件）。那么我们该如何使用 TextInput 组件呢？

3.3K1 0

javascript 事件基础

另外老版本的IE和跨浏览器的问题就不赘述了，都是一些历史过时问题了。...三、事件对象在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息；包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。...事件：鼠标指针在元素外部，用户将移入另一个元素的边界时触发，感觉和mouseenter事件类似； mouseout事件：用户将其移入另一个元素内被触发。...mouseup事件：用户释放鼠标按钮时触发；页面上所有的元素都支持鼠标事件，除了mouseenter和mouseleave，所有鼠标事件都会冒泡，也可以被取消，而取消鼠标事件将会影响浏览器的默认行为...foucs：在元素获得焦点时触发，这个事件不会冒泡，所有浏览器都支持。

9435 0

【React】243- 在 React 组件中使用 Refs 指南

3.9K3 0

Web APIs第七天

检索（查找）符合规则的字符串： exec() 方法在一个指定字符串中执行一个搜索匹配如果匹配成功，exec() 方法返回一个数组，否则返回null // 检索/查找符合规则的字符串返回的数组 let...量词量词用来设定某个模式出现的次数注意：逗号左右两侧千万不要出现空格量词说明 * 重复0次到N次 n >= 0 + 只重复1次到N次 n >= 1 ?...匹配换行符之外任何单个字符 console.log(/[.a]/.test('a')) // 10....匹配0~9之间的任一数字, 相当于[0-9] \D 匹配所有0~9以外的字符, 相当于 ^0-9] \w 匹配任意的字母、数字和下划线, 相当于[a-zA-Z0-9-__] \W 除所有字母、数字下划线以外的字符...修饰符修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等 i 是单词 ignore 的缩写，正则匹配时字母不区分大小写 g 是单词 global 的缩写，匹配所有满足正则表达式的结果

2972 0

前端学习(4)~html5详解(二)

拖拽元素的事件监听：（应用于拖拽元素） ondragstart当拖拽开始时调用 ondragleave 当鼠标离开拖拽元素时调用 ondragend 当拖拽结束时调用 ondrag...页面中任何一个元素都可以成为目标元素。...目标元素的事件监听：（应用于目标元素） ondragenter 当拖拽元素进入时调用 ondragover 当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态）...} // 当拖拽元素在目标元素上时，连续触发 two.ondragover = function (e) { //阻止拖拽事件的默认行为 e.preventDefault...two.ondragover = function (e) { // 阻止拖拽的默认行为 e.preventDefault(); } //

7140 0

webview中用到的Javascript 博客分类： Javascript JavaScriptjsonwebkitjQuery框架

隐藏桩节点：页面上有如下元素， id 是 line 的 div 是一个桩节点， content 下的所有内容都是由这个桩节点 clone 出来的。... 在所有节点 clone 结束之后，需要隐藏这个桩节点。...从 java 中获取的 json 字符串，在 javascript 中要转成 json 对象，一个很简单的方法就是 eval(json) 或 window.eval(json) 。...我以前也一直是这么做的。昨天，我这么解析一个从 java 中返回的 json 字符串，却遇到了问题，用这个 eval 解析它， webkit 一直报错，说语法错误。后来我用了另外一种方法，解决了。...Webview 中的页面，要可拖动并且里面元素可以点击，这个问题曾困扰过我，因为事件的冒泡机制似乎并不太管用。后来还是解决了，这种方法我经常用到。页面： <!

4771 0

React如何处理事件

如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)。...问题在以类继承的方法定义的组件中，事件处理函数的this指向的并不是当前组件。...; } 该种方式写起来比较简单，但是每次执行bind方法都会生成一个新的函数，势必会有额外的开销，明显这并不是一种好的方法。...; } 这种写法也不是特别麻烦，不过依然也会有一丢丢的性能开销问题。...向事件处理函数传递参数现在咱们要将之前为年龄加1的案例进行一下调整！调整为当点击时根据传递的参数来决定加几！比如传2，点击一次加2。

8702 0

基于react的H5音频播放器

相信布局方面已经没什么问题。...进度条以及播放按钮的布局代码大概就是这样，在css方面需要注意的就是进度条容器与进度条填充块以及进度条触点间的层级关系就好。功能逻辑进度动起来播放时，currntTime是时刻变化的。...let moveX = this.lectureAudio.duration / this.progressBar.clientWidth; //moveX是一个固定的常数，它代表着进度条宽度与音频总时长的关系...//另外还有一点是，audio的pause与play间隔过短会出现报错，导致audio无法准确的执行相应的动作。...currentTime，这也是开发时的刻意为之，最后会发现这个组件中的唯一变量就是currentTime，我们可以通过currentTime的变化完成所有的需求，并且不需要考虑其他因素的影响，因为所有的子组件都是围绕着

8.1K1 0

阻止a标签的默认事件及延伸

看如下实例： (1)把单击事件处理程序注册到一个锚元素，而不是一个外层的上，那么就要面对另外一个问题：当用户单击链接时，浏览器会加载一个新页面。...(2)当用户在编辑完表单后按下回车键时，会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。这种行为与我们讨论的事件处理程序不是同一个概念，它是单击标签元素的默认操作。...在这种情况下，处理方法有： 1、w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false; preventDefault它是事件对象(Event)的一个方法...，作用是取消一个目标元素的默认行为。...当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。

2.5K6 0

对HTML-input的一些思考和理解

这两个问题也造就了这篇文章： ---- 先说下input中的一些问题：不是所有的 input 都支持“placeholder”，比如：type="date" 。...不过，参照本文开篇的思路，我们同样可以先写一个 type="text" ，然后用0级DOM事件 onfocus （在触焦时）将其变为date：onfocus="(this.type='date')" 。...所以还有一种方案：在input上覆盖一个div，当点击时去操控 input 的事件和响应！我们都知道，在input中，当输入过一次时，下一次输入会有提示 —— autocomplete 。...这种类型的input，在输入时右侧会有一个“带圆圈的×”，那么肯定会有人觉得不想要 or 不好看了，我们也可以用伪元素来将其去掉： input[type="search"]::-webkit-search-cancel-button...几乎不用想，在手机上一定会出现一些“似乎莫名其妙的问题”：比较推荐的是，用div+absolute来重新写一个“小叉号”，用JS控制对应事件。 ★这里“比较推荐”是“在解决问题的办法”中比较而得。

6623 0

【React】786- 探索 React 合成事件

接下来和我一起开始学习吧~ 一、概念介绍 React 合成事件（SyntheticEvent）是 React 模拟原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。...事件委托/事件代理简单理解就是将一个响应事件委托到另一个元素。当子节点被点击时，click 事件向上冒泡，父节点捕获到事件后，我们判断是否为所需的节点，然后进行处理。...事件池分析（React 17 版本）由于 Web 端的 React 17 不使用事件池，所有不会存在上述“所有属性都会被置为 null”的问题。五、常见问题 1....React 事件中 this 指向问题在 React 中，JSX 回调函数中的 this 经常会出问题，在 Class 中方法不会默认绑定 this，就会出现下面情况， this.funName 值为...在 React 中，一个组件只能绑定一个同类型的事件监听器，当重复定义时，后面的监听器会覆盖之前的。

1.8K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云