집 > 기사 > 웹 프론트엔드 > 상위 요소 태그의 기본 동작과 클릭 이벤트 간의 상호작용
이 기사에서는 상위 요소인 태그의 href 기본 동작과 하위 요소에 바인딩된 클릭 이벤트에 대한 응답 사이의 영향에 대해 설명합니다. 필요한 경우 이를 참조할 수 있습니다. 그것이 당신에게 도움이 되기를 바랍니다.
개발 과정에서 문제가 발생했습니다. 단순히 데모를 작성했습니다. 실행 환경은 Chrome 68입니다.
a 태그 내부에 중첩이 있는 경우 상위 요소 a 태그와 the 하위 요소에 바인딩된 클릭 이벤트가 응답에 영향을 미칩니다. 페이지 구조:
nbsp;html> <meta> <meta> <meta> <title>a标签内部点击事件失效</title> <style> * { margin: 0; padding: 0; } .father { display: block; width: 500px; height: 200px; background-color: rgb(210, 111, 30); } .child-one { display: block; width: 200px; height: 50px; background-color: rgb(174, 43, 226); } .child-two { display: block; width: 200px; height: 50px; background-color: rgb(43, 226, 67); } .child-three { display: block; width: 200px; height: 50px; background-color: rgb(43, 137, 226); } </style> <a>父标签 <span> 子标签1 </span> <object> <a> 子标签2 </a> </object> <object> <a> 子标签3 </a> </object> </a> <script> let father = document.querySelector('.father'); let ele1 = document.querySelector('.child-one'); let ele2 = document.querySelector('.child-two'); let ele3 = document.querySelector('.child-three'); ele1.addEventListener('click', function (e) { e.stopPropagation(); // e.preventDefault(); alert('click child-one') window.location.href = 'child-one' }, false) ele2.addEventListener('click', function (e) { e.stopPropagation(); alert('click child-two') // window.location.href='child-two' }, false) ele3.addEventListener('click', function (e) { alert('click child-three') window.location.href = 'child-three' }, false) father.addEventListener('click', function (e) { alert('click father') window.location.href = 'father' }, false) </script>
예제는 아래와 같습니다(a 태그가 중첩된 경우 브라우저가 이를 잘못 구문 분석하므로 object 태그로 래핑됩니다).
상위 태그를 클릭하면 111이 먼저 나타난 후 상위 태그의 href 링크로 점프합니다.
href
onclick이 href 이전에 실행된다는 설명preventDefault
之后,执行了子元素自己的跳转。
当点击child-two时,弹出响应信息,然后会跳转href的链接。
当点击child-three时,先弹出click child-three
,然后是href child-three
,说明click事件先于href执行。
上面4个操作除了2之外都很好理解,2中,为什么已经在阻止了事件冒泡之后,仍然执行了父元素中href
的跳转。
首先可以肯定的是,事件冒泡确实被阻止了,因为父元素的onclick并没有执行。
所以猜测,标签的默认行为是无法通过取消冒泡来阻止的,就算事件没有冒泡到父元素,子元素在父元素<a></a>
标签内部,仍然会执行<a></a>
标签默认行为。
在子元素中添加e.preventDefault()
阻止默认行为
父元素不使用<a></a>
标签,使用其他标签绑定click事件且子元素阻止冒泡
父元素不使用href
属性,直接在<a></a>
child-one을 클릭하면 해당 요소에 바인딩된 클릭 이벤트가 실행되고 경고가 팝업되지만 위치는 여전히 father로 이동합니다.
버블을 방지한 후에도 실행 결과는 여전히 기대에 미치지 못합니다.preventDefault
를 추가한 후 하위 요소 자체의 점프가 수행됩니다. child-two를 클릭하면 응답 메시지가 팝업되며 href 링크가 점프됩니다. child-3을 클릭하면 click child-3
가 먼저 팝업되고 href child-3
이 팝업되어 href보다 먼저 클릭 이벤트가 실행됨을 나타냅니다. 🎜위의 네 가지 작업은 2를 제외하고 모두 이해하기 쉽습니다. 2에서 이벤트 버블링을 방지한 후에도 상위 요소의 href
점프가 계속 실행되는 이유는 무엇입니까? 🎜🎜생각: 🎜🎜우선 부모 요소의 onclick이 실행되지 않기 때문에 이벤트 버블링이 실제로 차단되는 것이 확실합니다. 🎜그래서 태그의 기본 동작은 버블링을 취소해도 방지할 수 없습니다. 이벤트가 상위 요소까지 버블링되지 않더라도 하위 요소는 상위 요소 <a> </a>
태그. <a></a>
태그의 기본 동작은 계속 실행됩니다. 🎜🎜해결책: 🎜🎜기본 동작을 방지하려면 하위 요소에 e.preventDefault()
를 추가하세요. 🎜🎜상위 요소는 <a></a>
태그를 사용하지 않습니다. 다른 태그를 사용하여 바인딩 클릭 이벤트를 설정하고 하위 요소의 버블링을 방지하세요🎜🎜상위 요소는 href
속성을 사용하지 않으며 클릭 이벤트를 <a> tag🎜🎜관련 추천 글: 🎜🎜🎜링크 태그 link CSS와 @import 로딩의 차이점은 무엇인가요? 🎜🎜🎜🎜HTML 태그: img 태그 사용 요약🎜🎜🎜🎜</a>
위 내용은 상위 요소 태그의 기본 동작과 클릭 이벤트 간의 상호작용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!