Safari未在父div上触发onclick

是一个前端开发中的问题，它指的是在Safari浏览器中，当点击一个子元素时，父元素的onclick事件没有被触发。

这个问题通常是由于Safari浏览器的事件冒泡机制不同于其他浏览器所导致的。在Safari中，如果子元素上有onclick事件，并且该事件没有被阻止冒泡，那么点击子元素时，只会触发子元素的onclick事件，而不会触发父元素的onclick事件。

解决这个问题的方法有多种，以下是一些常见的解决方案：

使用事件委托：将onclick事件绑定到父元素上，通过事件委托的方式来处理子元素的点击事件。这样无论点击父元素还是子元素，都会触发父元素的onclick事件。示例代码如下：

document.getElementById('父div的id').onclick = function(event) {
  // 判断点击的是父元素还是子元素
  if (event.target.id === '子元素的id') {
    // 处理子元素的点击事件
  } else {
    // 处理父元素的点击事件
  }
};

使用addEventListener方法：使用addEventListener方法来绑定父元素的点击事件，并设置第三个参数为true，表示在捕获阶段触发事件。这样无论点击父元素还是子元素，都会在捕获阶段触发父元素的onclick事件。示例代码如下：

document.getElementById('父div的id').addEventListener('click', function() {
  // 处理父元素的点击事件
}, true);

使用touchend事件：在移动设备上，可以使用touchend事件来替代onclick事件。在Safari中，touchend事件会在点击子元素后触发父元素的onclick事件。示例代码如下：

document.getElementById('父div的id').addEventListener('touchend', function() {
  // 处理父元素的点击事件
});

以上是解决Safari未在父div上触发onclick事件的几种常见方法。根据具体的场景和需求，选择适合的方法来解决该问题。

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

腾讯云前端开发服务：https://cloud.tencent.com/product/fe
腾讯云后端开发服务：https://cloud.tencent.com/product/ba
腾讯云软件测试服务：https://cloud.tencent.com/product/ts
腾讯云数据库服务：https://cloud.tencent.com/product/cdb
腾讯云服务器运维服务：https://cloud.tencent.com/product/cvm
腾讯云云原生服务：https://cloud.tencent.com/product/tke
腾讯云网络通信服务：https://cloud.tencent.com/product/vpc
腾讯云网络安全服务：https://cloud.tencent.com/product/ddos
腾讯云音视频服务：https://cloud.tencent.com/product/tiia
腾讯云多媒体处理服务：https://cloud.tencent.com/product/mps
腾讯云人工智能服务：https://cloud.tencent.com/product/ai
腾讯云物联网服务：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发服务：https://cloud.tencent.com/product/mpe
腾讯云存储服务：https://cloud.tencent.com/product/cos
腾讯云区块链服务：https://cloud.tencent.com/product/baas
腾讯云元宇宙服务：https://cloud.tencent.com/product/vr

相关·内容

跨站脚本（XSS）备忘录-2019版

/a> 触发拖动元素（Chrome、Firefox、IE、Safari) test 触发拖动已在元素上完成（Chrome...(1)" contenteditable>test 按下鼠标时触发（Chrome、Firefox、IE、Safari) test 当鼠标悬停在元素上时触发...> 当鼠标移离元素时触发（Chrome、Firefox、IE、Safari) test 需要将鼠标悬停在元素上（Chrome、Firefox、IE...on OS X) 链接元素：访问键属性可以在通常无法利用的元素上启用XSS (Press...:Msgbox+1">XSS JScript compact是JS的最小版本，未在IE中广泛使用

6.1K1 0

iOS 5 Mobile Safari中label的bug

iOS 5 Mobile Safari中label的bug 前几天在codepen上看到了不错CSS用法，今天打算在写新博客的时候使用类似的思路：用input[type=checkbox]来控制同级元素的样式...搜索之后得到解决方案：为label加个onclick属性，它就可以正常触发input[type=checkbox]了。...却发现还需要另外一个条件才能触发label的行为。...而且这不仅仅针对checkbox，对所有的input都需要这两个条件： label有onclick属性（即绑定了click事件），或者是它的父元素绑定了click事件。...如果是document.body绑定，那么手指按下的时候label会有样式上的变化（onclick也有此效果）。如果是一般的父div则没有此效果。

6522 0

事件

，会依次触发下列事件：（1）focusout在失去焦点的元素上触发；（2）focusin在获得焦点的元素上触发；（3）blur在失去焦点的元素上触发；（4）DOMFocusOut...在失去焦点的元素上触发；（5）focus在获得焦点的元素上触发；（6）DOMFocusIn在获得焦点的元素上触发。...最后会触发DOMSubtreeModified事件，其目标是被移除节点的父节点。...事件目标为被插入的节点，而event.relatedNode属性的值是父节点引用。接着会在新插入的节点上触发DOMNodeInsertIntoDocument事件。...最后触发DOMSubtreeModified事件，目标是新节点的父节点。 6.

3.2K5 1

js事件冒泡

事件捕获*（****event capturing****）*：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话...，会先触发父元素绑定的事件。...dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。...不同的浏览器对此有着不同的实现，IE10及以下不支持捕获型事件，所以就少了一个事件捕获阶段，IE11、Chrome 、Firefox、Safari等浏览器则同时存在。...("支持") }); } else if (div1.attachEvent) { div1.attachEvent('onclick', function

11.8K4 2

今天聊聊DOM事件的传播机制

> 如果单击了页面中的 div 元素，那么这个 click 事件沿 DOM 树向上传播，在每一级节点上都会发生，按照如下顺序进行传播： div body...IE9、Firefox、Chrome、Safari 将事件一直冒泡到 window 对象。...，由于事件冒泡的存在，当我们点击 div 时，所有祖先元素的点击事件也会被触发。... 元素： document html body div IE9、Firefox、Chrome、Safari 等现代浏览器都支持事件捕获，但是也是从 window 对象开始捕获。...将事件监听器绑定到父元素 ul 上，这样即可对所有的 li 元素添加事件，如下： var colorList = document.getElementById("color-list"); colorList.addEventListener

9582 0

使用 tabindex 配合 focus-within 巧妙实现父选择器

事件，才能触发它或者它的父元素的 :focus-within。...CodePen -- tabindex 配合 focus-within 实现div的父选择器一个小细节，button 的 focus 事件在 Safari 和 firefox 的上冒泡问题由于 input...在 Chrome 上的表现是正常，而在 Windows 的 Safari、Firefox 上，会触发 button 的 focus 事件，但不会触发父元素的 :focus-within 事件，也就是上面说的...而在 Mac 上，则连 focus 都不会触发。这一点，在使用的时候务必需要留意。...最后当然，本文介绍的小技巧，只能算是一个非常简陋，特定条件（点击目标元素改变父元素样式）下的父选择器，真正意义上的父选择器仍需等待未来规范的实现。

1K1 0

DOM事件基本概念大总结(前端必备)

比如点击某一个按钮，而它是由上一层的父标签，或许在上一层还有父标签甚至是整个页面。因此点击一个元素可以看成是同时点击了父标签或者整个页面。那么此时事件应该怎么响应到指定标签呢？... function Test(event) { console.log(event.type); }... 1 2 </div...：输出为 div；因为该执行函数就绑定在该元素上情况三：点击 div；只触发 father() target 和 currentTarget 都为 div 另外，执行函数中的 this 值指向... 1 2 <

1.8K2 0

深入理解 DOM 事件机制

接下来我们看个事件冒泡的例子： // 例3 ...... window.onclick = function...三、事件代理(事件委托) 由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）。...2.如何实现接下来我们来实现上例中父层元素 #list 下的 li 元素的事件委托到它的父层元素上： // 给父层元素绑定事件 document.getElementById('list').addEventListener...我们在例4的inner元素click事件上，添加event.stopPropagation()这句话后，就阻止了父事件的执行，最后只打印了'inner'。...既能阻止事件向父元素冒泡，也能阻止元素同事件类型的其它监听器被触发。

2.8K5 0

5、React组件事件详解

3.7K1 0

事件高级

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。...eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。...当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。那么是先执行父元素的单击事件，还是先执行div的单击事件？？？事件流描述的是从页面中接收事件的顺序。...（给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。）...以上案例：给ul注册点击事件,然后利用事件对象的target来找到当前点击的li ,因为点击li,事件会冒泡到ul上, ul有注册事件,就会触发事件监听器。

1.3K2 0

面试官：什么是js中的事件流以及事件模型？

引用W3c的解释 HTML事件就是发生在HTML元素上的事情当在HTML中使用javaScript时，javaScript能够应对这些事件举例几个常用的事件： onClick (鼠标单击元素...依次触发其祖先节点的同类型事件，直到DOM根节点事件捕获当节点事件被触发时，会从DOM根节点开始，依次触发其子孙节点的同类型事件，直到当前节点自身。...、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发目标事件上的事件五、addEventListener() addEventListener() 方法用于向指定元素添加事件句柄...传播意味着向上冒泡到父元素或向下捕获到子元素。...，若内层子元素有点击事件，则会冒泡到父容器上，这就是事件委托，简单说就是：子元素委托它们的父级代为执行事件。

1.9K1 0

ASP.NET AJAX(12)__浏览器兼容功能判断浏览器的类型和版本Sys.Browser针对DOM元素的兼容操作针对DOM事件的兼容操作

目前，常见的浏览器IE（6，8，9），chrome，firefox，safari等，还有国内的一些曾经靠恐吓用户来提高使用率的某浏览器（河蟹社会），这些浏览器对于Javascript的语言特性实现大致是相同的...id="someText"> Xiaoyaojian ...添加一个mousedown事件,触发这个事件，调用onMouseDown方法这时，我们可以在红块内点击鼠标的左右中键，并同时按下Alt/Ctrl/Shift键盘，就可以清晰的反映到下面的DIV的信息里

1.1K9 0

jQuery 基本语法

ancestors () 一依次以匹配结点的父节点的内容为对象，根节点除外（有点不好理解，看看下面例子就明白了） one two </span...alert($(f).eq(i).html());} } 第一个对象是以的父节点的内容为对象，[ two ] 第一个对象是以的父节点的父节点（div）的内容为对象，[one...else if($.browser.opera) { alert("这是一个opera浏览器");} }) 当页面载入式判断浏览器类型，可判断的类型有msie、mozilla、opera、safari...function，当鼠标move out时触发第二个function 样式：.red{color:#FF0000} Html代码： sdf</div...red样式，离开层时移出red样式 bind(type, fn) 用户将一个事件和触发事件的方式绑定到匹配对象上。

3.8K4 0

Vue父组件与子组件传递事件调用事件

父组件：弹弹弹，弹出子组件 <childs ref="alert" @watchChild="parentReceive...; //触发$emit绑定的watchChild方法 } } } 第一种方法：如上：通过this.$emit()来触发父组件的方法。...具体就是子组件触发$emit绑定的事件watchChild，然后父组件监听watchChild，一旦watchChild被触发便会触发父组件的parentReceive方法。...父组件：弹弹弹，弹出子组件 <childs ref="alert" :on-ok="parentReceive...; } } } } 第二种方法：在子组件props中定义属性onOK，类型为function，然后在父组件中把要触发的方法名传递给onOK属性，最后在子组件中判断onOk是否存在，

2.9K2 0

阻止mouseover冒泡行为_onmousedown是什么意思

onmousemove 事件在鼠标移动到 div 元素上就开始时触发，在这个div上移动一直触发（冒泡）。... onmouseover 事件在鼠标指针进入 div 元素时触发,在子元素上也会触发(p 和 span)（冒泡）。...DOCTYPE html> 其中： 1. onmousemove 事件在鼠标移动到 div 元素上时触发，鼠标在div、p、span元素内移动（即白框内也会触发，事件冒泡到父级div）； 2. mouseenter...事件中有在鼠标指针进入 div 元素时触发，鼠标进入p、span元素内不会触发，因为不支持事件冒泡； 3. onmouseover 事件在鼠标指针进入 div 元素时触发,在子元素上也会触发(p 和...事件冒泡比如说父元素添加了onclick事件，当子元素发生onclick事件时，父元素的onclick事件也会触发。四.

1.5K2 0

前端基础-事件对象

第4章事件对象 4.1 概述事件的触发，大部分情况下是用户的一种行为，也就是说，我们并不能确定用户什么时间触发；而且，由于事件的传播机制，我们甚至不能确定事件具体触发在哪个节点；这是一件很不爽的事情...event.type:返回一个字符串，表示事件类型，大小写敏感; event.timeStamp:返回一个毫秒时间戳，表示事件发生的时间; clientX、clientY :获取鼠标事件触发的坐标 <...); //返回触发节点 console.log(e.target); } 由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件...event.stopPropagation()：方法阻止事件在DOM中继续传播，防止再触发定义在别的节点上的监听函数 2 <div...onclick = function(e){ alert('d1'); } a.onclick = function(e){ //阻止事件传播

4531 0

事件高级

该访法接收两个参数: ●e eventNameWithOn:事件类型字符串，比如onclick、onmouseover, 这里要带on ●callback: 事件处理函数，当目标触发事件时回调函数被调用...当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。那么是先执行父元素的单击事件，还是先执行div的单击事件？？？事件流描述的是从页面中接收事件的顺序。...123 var div = document.querySelector('div'); div.onclick = function...常情况下terget 和 this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），这时候this指向的是父元素，因为它是绑定事件的元素对象...事件委托的原理给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。事件委托的作用我们只操作了一次 DOM ，提高了程序的性能。

1.5K4 1

前端day16-JS(WebApi)学习笔记（事件补充、事件冒泡与捕获）

="true"> <!...，那么他的所有父级元素的同名事件也会被依次触发元素->父元素->body->html->document->window 事件冒泡一直存在，只不过以前我们没有给父级元素加同名事件 <!...阻止事件冒泡：让同名事件不要在父元素中冒泡（触发） * 说人话：点击一个元素只会触发当前元素的事件，不会触发父元素的同名事件语法：事件对象.stopPropagation() IE8及之前不支持...，一级一级往上找父元素触发同名事件，如果有就触发 2.事件捕获：从最顶级的父元素一级一级往下找子元素触发同名事件，直到触发事件的元素为止事件捕获与事件冒泡触发事件的顺序完全相反 3.事件捕获，只能通过...console.log(e.type); } 事件冒泡好处：如果想给父元素的多个子元素添加事件，我们可以只需要给父元素添加事件即可，然后通过获取事件源(

1.7K0 0

简单说 JavaScript中的事件委托（上）

id='div'> p.onclick = function (){ console.log('蓝色 p 元素触发事件...'); } div.onclick = function (){ console.log('红色 div 元素触发事件'); } </html...从上面的图中我们看见，当点击蓝色 p 元素时，先触发了 p 元素上绑定的事件，然后又触发了红色 div 元素上绑定的事件，这就是事件冒泡了。事件委托的实现先来段代码 <!...，而是在生成元素的父元素上绑定事件，因为父元素是一直存在的，所以绑定的事件就可以生效。...，而是绑定在已经存在于页面上的父元素，冒泡到父元素上时，执行绑定在父元素上的事件处理函数，这样能减少很多不必要的工作。

5672 0

事件高级

该方法接收两个参数：  eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on  callback：事件处理函数，当目标触发事件时回调函数被调用...事件冒泡 son盒子 // onclick...123 var div = document.querySelector('div'); div.onclick = function...常情况下terget 和 this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），这时候this指向的是父元素，因为它是绑定事件的元素对象...事件委托的原理给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。事件委托的作用我们只操作了一次 DOM ，提高了程序的性能。

1.2K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

Safari未在父div上触发onclick

相关·内容

跨站脚本（XSS）备忘录-2019版

iOS 5 Mobile Safari中label的bug

事件

js事件冒泡

今天聊聊DOM事件的传播机制

使用 tabindex 配合 focus-within 巧妙实现父选择器

DOM事件基本概念大总结(前端必备)

深入理解 DOM 事件机制

5、React组件事件详解

事件高级

面试官：什么是js中的事件流以及事件模型？

ASP.NET AJAX(12)__浏览器兼容功能判断浏览器的类型和版本Sys.Browser针对DOM元素的兼容操作针对DOM事件的兼容操作

jQuery 基本语法

Vue父组件与子组件传递事件调用事件

阻止mouseover冒泡行为_onmousedown是什么意思

前端基础-事件对象

事件高级

前端day16-JS(WebApi)学习笔记（事件补充、事件冒泡与捕获）

简单说 JavaScript中的事件委托（上）

事件高级

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐