하위 요소의 클릭 이벤트 방지-JS 튜토리얼-php.cn

하위 요소의 클릭 이벤트 방지

PHPz

풀어 주다： 2018-10-10 15:35:23

앞으로

1550명이 탐색했습니다.

문제 설명:
오늘 페이지를 디버깅할 때 이상한 현상이 발생했습니다. 상위 요소에 클릭 이벤트가 정의되어 있고 상위 요소 아래에 li 태그가 하나씩 있습니다. 이에 대한 클릭 이벤트가 없습니다. li 태그 중 하나를 클릭하면 일부 작업이 발생하는 현상이 발생합니다.

이 문제로 인해 오랫동안 의구심이 생겼습니다. 코드를 여러 번 검토한 결과, 하위 요소를 클릭하면 상위 요소의 이벤트도 발생한다는 사실을 확인했습니다. 당시 저는 이러한 현상을 부모 요소에 클릭 이벤트를 정의하면 실제로는 이 영역에 클릭 이벤트가 정의되어 있기 때문에 자식 요소를 클릭하면 실제로는 부모 요소가 클릭되는 현상에 기인한다고 생각했습니다.

그러나 보다 과학적인 설명은 다음과 같습니다. 하위 요소를 클릭할 때 하위 요소에 클릭 이벤트가 없으면 클릭 이벤트는 클릭을 처리할 수 있는 함수가 나타날 때까지 자동으로 상위 요소에 버블링됩니다. 이벤트를 찾을 수 있습니다.

이 설명의 장점은 이러한 현상을 차단할 수 있는 방법, 즉 클릭 이벤트의 버블링을 방지할 수 있는 방법이 있다는 것입니다. jQuery의 경우 stopPropagation()입니다. 다음 코드에서는 stopPropagation이 없는 경우와 stopPropagation이 있는 경우의 차이점을 확인해 볼 수 있습니다.

코드는 다음과 같습니다.

<!DOCTYPE html><html><meta http-equiv="content-type" content="text/html;charset=utf8"><link rel="stylesheet" type="text/css" href=""><script src="./jQuery/jquery-2.1.4.js"></script><script type="text/javascript">
    $(function() {
        $("#mainp").click(function(event) {
            if($(this).children(&#39;ul&#39;).css("display") == "none")
                $(this).children(&#39;ul&#39;).css("display","block");            else
                $(this).children(&#39;ul&#39;).css(&#39;display&#39;,"none");
        }); 
        //阻止向上冒泡
        $("#mainp > ul").click(function(event) {
            event.stopPropagation();
        });
    });</script><title>测试如何屏蔽子元素的事件</title><body>
    <p id="mainp">
        <button>click me</button>
        <ul style="display:none">
            <li>first</li>
            <li>second</li>
            <li>third</li>
        </ul>
    </p></body></html>

로그인 후 복사

더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼

을 방문하세요.