상위 요소 태그의 기본 동작과 클릭 이벤트 간의 상호작용

이 기사에서는 상위 요소인 태그의 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(&#39;.father&#39;);
        let ele1 = document.querySelector(&#39;.child-one&#39;);
        let ele2 = document.querySelector(&#39;.child-two&#39;);
        let ele3 = document.querySelector(&#39;.child-three&#39;);

        ele1.addEventListener(&#39;click&#39;, function (e) {
            e.stopPropagation();
            // e.preventDefault();
            alert(&#39;click child-one&#39;)
            window.location.href = &#39;child-one&#39;
        }, false)

        ele2.addEventListener(&#39;click&#39;, function (e) {
            e.stopPropagation();
            alert(&#39;click child-two&#39;)
            // window.location.href=&#39;child-two&#39;
        }, false)

        ele3.addEventListener(&#39;click&#39;, function (e) {
            alert(&#39;click child-three&#39;)
            window.location.href = &#39;child-three&#39;
        }, false)

        father.addEventListener(&#39;click&#39;, function (e) {
            alert(&#39;click father&#39;)
            window.location.href = &#39;father&#39;
        }, false)

    </script>

예제는 아래와 같습니다(a 태그가 중첩된 경우 브라우저가 이를 잘못 구문 분석하므로 object 태그로 래핑됩니다).

작업 수행:

1. 상위 태그를 클릭하면 111이 먼저 나타난 후 상위 태그의 href 링크로 점프합니다.
   href

2. onclick이 href 이전에 실행된다는 설명
   preventDefault之后，执行了子元素自己的跳转。

3. 当点击child-two时，弹出响应信息，然后会跳转href的链接。

4. 当点击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 중국어 웹사이트의 기타 관련 기사를 참조하세요!