Safari未在父div上触发onclick - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

跨站脚本（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 onclick="alert(1)" /> (Press...:Msgbox+1">XSS JScript compact是JS的最小版本，未在IE中广泛使用 onclick="jscript.compact:alert(1);">

7.7K1 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则没有此效果。

9612 0

您找到你想要的搜索结果了吗？

是的

没有找到

事件

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

4K5 1

js事件冒泡

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

13.5K4 2

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

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

2.4K2 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 都不会触发。这一点，在使用的时候务必需要留意。...最后当然，本文介绍的小技巧，只能算是一个非常简陋，特定条件（点击目标元素改变父元素样式）下的父选择器，真正意义上的父选择器仍需等待未来规范的实现。

1.3K1 0

浏览器中的事件委派、捕获、冒泡

onclick="alert('form 点击事件触发')"> 这是一个 form 元素 div onclick="alert('div 点击事件触发')"> 这是一个 div...元素 onclick="alert('p 点击事件触发')">这是一个 p 元素 div>以上面的例子来说 (建议在面试时也可以简单快速手写这个例子，可以帮助说明...)，当我们在子层装一个 onclick 的监听器，点下去时，不仅该元素有跑出 alert ，其父层 div> 的 onclick 也被触发，然后父层的父层的 onclick...， event.currentTarget 的值可能会发生变化例如，如果在一个父元素上添加点击事件监听器，当其子元素被点击时，事件会冒泡到父元素，此时 event.currentTarget 将指向父元素根据具体的需求...阻止冒泡： event.stopPropagation()在实务上，我们有时候不想要冒泡，例如只想要子元素的事件被触发，不想要父层的元素被触发，避免干扰。

5250 0

深入理解 DOM 事件机制

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

3.2K5 0

5、React组件事件详解

单击触发react事件 React并不是将click事件绑在该div的真实DOM上，而是在document处监听所有支持的事件，当事件发生并冒泡至document处时，React...( div onClick={this.onReactClick}> 单击事件触发 div> )...console.log("子元素React合成事件绑定事件触发") } render(){ return( div onClick...，则打印出：子元素原生事件绑定事件触发父组件原生事件绑定事件触发在子元素React合成事件onClick中阻止事件传播，则打印出：子元素原生事件绑定事件触发父组件原生事件绑定事件触发...子元素React合成事件绑定事件触发在父元素React合成事件onClick中阻止事件传播，则打印出：子元素原生事件绑定事件触发父组件原生事件绑定事件触发子元素React合成事件绑定事件触发

4.6K1 0

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

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

2.4K1 0

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

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

1.4K9 0

事件高级

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

2K2 0

jQuery 基本语法

ancestors () 一依次以匹配结点的父节点的内容为对象，根节点除外（有点不好理解，看看下面例子就明白了） div> 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代码： div id="a">sdfdiv...red样式，离开层时移出red样式 bind(type, fn) 用户将一个事件和触发事件的方式绑定到匹配对象上。

4.8K4 0

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

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

3.8K2 0

事件高级

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

2.1K4 1

前端基础-事件对象

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

6341 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.9K2 0

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

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

1.1K2 0

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

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

2.1K0 0

事件高级

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

1.7K1 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭