source

하위 앵커를 클릭할 때 상위 클릭 이벤트가 발생하지 않도록 하려면 어떻게 해야 합니까?

manycodes 2023. 1. 9. 21:17
반응형

하위 앵커를 클릭할 때 상위 클릭 이벤트가 발생하지 않도록 하려면 어떻게 해야 합니까?

현재 jQuery를 사용하여 div를 클릭할 수 있도록 하고 있으며 이 div에는 앵커도 있습니다.문제는 앵커 클릭 시 클릭 이벤트(div와 앵커)가 모두 발생한다는 것입니다.앵커를 클릭할 때 div의 클릭 이벤트가 발생하지 않도록 하려면 어떻게 해야 합니까?

다음은 고장난 코드입니다.

자바스크립트

var url = $("#clickable a").attr("href");

$("#clickable").click(function() {
    window.location = url;
    return true;
})

HTML

<div id="clickable">
    <!-- Other content. -->
    <a href="http://foo.example">I don't want #clickable to handle this click event.</a>
</div>

이벤트는 클릭 이벤트가 부착된 DOM의 가장 높은 지점까지 버블합니다.따라서 이 예에서는 div에 명시적으로 클릭할 수 있는 다른 요소가 없는 경우에도 div의 모든 하위 요소는 DIV의 클릭 이벤트 핸들러가 이를 포착할 때까지 클릭 이벤트를 DOM 위로 버블링합니다.

이 문제에는 두 가지 해결책이 있습니다.jQuery는 이벤트와 함께 이벤트args 개체를 전달합니다.

$("#clickable").click(function(e) {
    var senderElement = e.target;
    // Check if sender is the <div> element e.g.
    // if($(e.target).is("div")) {
    window.location = url;
    return true;
});

클릭 이벤트핸들러를 링크에 부가할 수도 있습니다.이러한 이벤트핸들러는, 자신의 핸들러가 실행된 후에 이벤트의 버블링을 정지하도록 지시합니다.

$("#clickable a").click(function(e) {
   // Do something
   e.stopPropagation();
});

stopPropagation 메서드를 사용합니다.다음 예를 참조해 주세요.

$("#clickable a").click(function(e) {
   e.stopPropagation();
});

jQuery Docs가 말한 바와 같이:

stopPropagation는 것을 통지하는 합니다.method는 이벤트를 통지하는 것을 방지합니다.

다른 청취자가 이 이벤트를 처리하는 것을 방해하지 않는다는 점에 유의하십시오(예를 들어 버튼의 클릭 핸들러 등).원하는 효과가 아닌 경우 를 사용해야 합니다.stopImmediatePropagation★★★★★★ 。

jQuery 이외의 코드를 찾고 있는 모든 사용자를 위한 솔루션(순수 자바스크립트)

document.getElementById("clickable").addEventListener("click", function( e ){
    e = window.event || e; 
    if(this === e.target) {
        // put your code here
    }
});

부모의 자식을 클릭하면 코드가 실행되지 않습니다.

어떤 경우에도 내부 요소와 상호 작용하지 않을 경우 CSS 솔루션이 유용할 수 있습니다.

요소를 '보다 낫다'로 만 하면 됩니다.pointer-events: none

고객님의 경우:

.clickable > a {
    pointer-events: none;
}

또는 일반적으로 모든 내부 요소를 대상으로 합니다.

.clickable * {
    pointer-events: none;
}

이 쉬운 해킹으로 인해 React로 개발하면서 많은 시간을 절약할 수 있었습니다.JS

브라우저 지원은 다음 URL에서 찾을 수 있습니다.http://caniuse.com/ #syslog=syslog-syslog

이것 또한 시도해 볼 수 있어요.

$("#clickable").click(function(event) {
   var senderElementName = event.target.tagName.toLowerCase();
   if(senderElementName === 'div')
   {
       // do something here 
   } 
   else
   {
      //do something with <a> tag
   }
});

인라인 대체:

<div>
    <!-- Other content. -->
    <a onclick='event.stopPropagation();' href="http://foo.example">I don't want #clickable to handle this click event.</a>
</div>

필요한 사람이 있는 경우 쓰기(내 밑에서 작업):

event.stopImmediatePropagation()

이 솔루션에서.

클릭 가능한 div에 여러 요소가 있는 경우 다음을 수행해야 합니다.

$('#clickable *').click(function(e){ e.stopPropagation(); });

사용.return false;또는e.stopPropogation();추가 코드 실행을 허용하지 않습니다.이 지점 자체에서 흐름이 멈춥니다.

비교하다ev.currentTarget언제this사용할 수 없습니다(React 등).

$("#clickable").click(function(e) {
    if (e.target === e.currentTarget) {
        window.location = url;
        return true;
    }
})

다음은 Angular 2+를 사용하는 예입니다.

예를 들어, 사용자가 Modal Component 외부에서 누른 경우 Modal Component를 닫으려면 다음 절차를 따릅니다.

// Close the modal if the document is clicked.

@HostListener('document:click', ['$event'])
public onDocumentClick(event: MouseEvent): void {
  this.closeModal();
}

// Don't close the modal if the modal itself is clicked.

@HostListener('click', ['$event'])
public onClick(event: MouseEvent): void {
  event.stopPropagation();
}


var inner = document.querySelector("#inner");
var outer = document.querySelector("#outer");
inner.addEventListener('click',innerFunction);
outer.addEventListener('click',outerFunction);

function innerFunction(event){
  event.stopPropagation();
  console.log("Inner Functiuon");
}

function outerFunction(event){
  console.log("Outer Functiuon");
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Pramod Kharade-Event with Outer and Inner Progration</title>
</head>
<body>
<div id="outer" style="width:100px;height:100px;background-color:green;">
  <div id="inner" style="width:35px;height:35px;background-color:yellow;"></div>
</div>
</body>
</html>

이벤트가 부모(div)에 도달(버블링)하지 않도록 해야 합니다.bubbleing에 대한 부분은 여기를 참조하고 jQuery 고유의 API 정보는 여기를 참조하십시오.

인라인 컨텍스트의 경우 HTML에서 다음을 수행합니다.

onclick="functionCall();event.stopPropagation();

e.stopPropagation()올바른 솔루션이지만 이벤트핸들러를 내부 앵커에 접속하지 않는 경우는, 이 핸들러를 외부 div 에 접속하는 것만으로 충분합니다.

e => { e.target === e.currentTarget && window.location = URL; }

일부 서브요소를 클릭 불가로 지정하려면 다음 예시와 같이 css 계층을 작성합니다.

이 예에서는 클래스가 ".subtable"인 테이블 내의 td inside tr 내의 모든 요소(*)로의 전파를 정지합니다.

$(document).ready(function()
{    
   $(".subtable tr td *").click(function (event)
   {
       event.stopPropagation();
   });

});

대상이 div-element가 아닌지 확인한 후 부모에게 다른 클릭 이벤트를 발행하면 핸들에서 "돌아가"게 됩니다.

$('clickable').click(function (event) {
    let div = $(event.target);
    if (! div.is('div')) {
       div.parent().click();
       return;
    }
    // Then Implement your logic here
}

여기 jQuery가 아닌 솔루션이 있습니다.

<div style="background:cyan; width:100px; height:100px;" onclick="if (event.srcElement==this) {console.log('outer');}">
    <a style="background:red" onclick="console.log('inner');">Click me</a>
</div>

리액트 사용으로 문제가 생겼을 때 이렇게 해결했습니다.

scs:

#loginBackdrop {
position: absolute;
width: 100% !important;
height: 100% !important;
top:0px;
left:0px;
z-index: 9; }

#loginFrame {
width: $iFrameWidth;
height: $iFrameHeight;
background-color: $mainColor;
position: fixed;
z-index: 10;
top: 50%;
left: 50%;
margin-top: calc(-1 * #{$iFrameHeight} / 2);
margin-left: calc(-1 * #{$iFrameWidth} / 2);
border: solid 1px grey;
border-radius: 20px;
box-shadow: 0px 0px 90px #545454; }

컴포넌트의 렌더():

render() {
    ...
    return (
        <div id='loginBackdrop' onClick={this.props.closeLogin}>
            <div id='loginFrame' onClick={(e)=>{e.preventDefault();e.stopPropagation()}}>
             ... [modal content] ...
            </div>
        </div>
    )
}

하위 모달(콘텐츠 div)의 onClick 함수를 추가하면 상위 요소의 'Close Login' 함수에 도달하는 마우스 클릭 이벤트가 방지됩니다.

이것은 나에게 효과가 있었고 나는 2개의 간단한 div로 모달 효과를 낼 수 있었다.

하위 요소를 클릭하면 이벤트가 parent 및 event.target !== event.currentTarget까지 버블됩니다.

따라서 기능에서 이를 확인하고 일찍 돌아올 수 있습니다.

var url = $("#clickable a").attr("href");
$("#clickable").click(function(event) {
    if ( event.target !== event.currentTarget ){
        // user clicked on a child and we ignore that
        return;
    }
    window.location = url;
    return true;
})

이것이 당신이 찾고 있는 것입니다.

mousedownevent. 이것은 모든 DOM 요소에서 작동하여 다음과 같은 javascript 포커스 핸들러를 방지합니다.

$('.no-focus').mousedown(function (e) {
   e.prevenDefault()

   // do stuff
}

에vue.js다음과 같은 수식어를 사용할 수 있습니다.

<span @mousedown.prevent> no focus </span>

입력에 를 사용하면 텍스트 선택 핸들러가 차단됩니다.

더하다a다음과 같습니다.

<a href="http://foo.example" onclick="return false;">....</a>

또는return false;클릭 핸들러에서#clickable예를 들어 다음과 같습니다.

  $("#clickable").click(function() {
        var url = $("#clickable a").attr("href");
        window.location = url;
        return false;
   });

모든 솔루션은 복잡하고 jscript입니다.가장 간단한 버전은 다음과 같습니다.

var IsChildWindow=false;

function ParentClick()
{
    if(IsChildWindow==true)
    {
        IsChildWindow==false;
        return;
    }
    //do ur work here   
}


function ChildClick()
{
    IsChildWindow=true;
    //Do ur work here    
}

<a onclick="return false;" href="http://foo.example">I want to ignore my parent's onclick event.</a>

언급URL : https://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli

반응형

'source' 카테고리의 다른 글

Python 모듈의 버전을 확인하려면 어떻게 해야 하나요?  (0) 2023.01.15
JavaScript를 난독화(보호)하려면 어떻게 해야 합니까?  (0) 2023.01.15
python으로 현재 시각을 취득하여 년, 월, 일, 시간, 분으로 분할하는 방법  (0) 2023.01.09
왜 java.lang이야?객체가 추상적이지 않습니까?  (0) 2023.01.09
MySQL-python 설치  (0) 2023.01.09

'source'의 다른글

  • 현재글하위 앵커를 클릭할 때 상위 클릭 이벤트가 발생하지 않도록 하려면 어떻게 해야 합니까?

관련글

댓글

티스토리툴바