어떻게 자식 앵커를 클릭하면 발사에서 부모의 온 클릭 이벤트를 방지합니까?

해결법

1.클릭 이벤트가 부착 된의 DOM에서 가장 높은 지점에 이벤트 거품. 그래서 예를 들어, 당신은 사업부의 다른 명시 적으로 클릭 할 수있는 요소를 가지고 있지 않은 경우에도 사업부의 모든 자식 요소 DIV의 클릭 이벤트 핸들러 어획량 때까지 그것에 거품은 DOM까지 자신의 클릭 이벤트를합니다.

클릭 이벤트가 부착 된의 DOM에서 가장 높은 지점에 이벤트 거품. 그래서 예를 들어, 당신은 사업부의 다른 명시 적으로 클릭 할 수있는 요소를 가지고 있지 않은 경우에도 사업부의 모든 자식 요소 DIV의 클릭 이벤트 핸들러 어획량 때까지 그것에 거품은 DOM까지 자신의 클릭 이벤트를합니다.

이 실제로 이벤트를 발생 누가 확인하는 두 가지 해결책이 있습니다. jQuery를이있는 EventArgs 이벤트와 함께 객체를 전달합니다
```
$("#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();
});
```
2.사용 stopPropagation 메소드는, 예를 참조하십시오

사용 stopPropagation 메소드는, 예를 참조하십시오
```
$("#clickable a").click(function(e) {
   e.stopPropagation();
});
```
으로는 jQuery를 문서로 말했다 :

이 원하는 효과가 아닌 경우, 그것은 (버튼에 대한 전. 하나 이상의 클릭 핸들러)이 이벤트를 처리하기 위해 다른 청취자를 방지하지 않는다는 것을 명심하십시오, 당신은 stopImmediatePropagation을 대신 사용해야합니다.
3.여기가 아닌 jQuery 코드를 찾고 거기 모두 내 솔루션 (순수 자바 스크립트)

여기가 아닌 jQuery 코드를 찾고 거기 모두 내 솔루션 (순수 자바 스크립트)
```
document.getElementById("clickable").addEventListener("click", function( e ){
    e = window.event || e; 
    if(this === e.target) {
        // put your code here
    }
});
```
부모의 차일를 클릭하면 코드는 실행 실 거예요

4.당신이 시도 할 수 있습니다

당신이 시도 할 수 있습니다

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

5.당신이 내부 요소와 상호 작용하지 않으려면 / 어떤 경우에요, 다음 CSS 솔루션은 당신을 위해 유용 할 수 있습니다.

당신이 내부 요소와 상호 작용하지 않으려면 / 어떤 경우에요, 다음 CSS 솔루션은 당신을 위해 유용 할 수 있습니다.

단지 내부 요소를 설정 / 포인터 이벤트에이야 : 없음

귀하의 경우 :
```
.clickable > a {
    pointer-events: none;
}
```
또는 모든 내부 구성 요소를 일반적으로 타겟팅하는 방법 :
```
.clickable * {
    pointer-events: none;
}
```
ReactJS으로 개발하는 동안이 쉽게 해킹은 나에게 많은 시간을 저장

브라우저 지원은 여기에서 볼 수 있습니다 : http://caniuse.com/#feat=pointer-events
6.당신이 클릭 할 수있는 DIV의 여러 요소가있는 경우, 당신은이 작업을 수행해야합니다 :

당신이 클릭 할 수있는 DIV의 여러 요소가있는 경우, 당신은이 작업을 수행해야합니다 :
```
$('#clickable *').click(function(e){ e.stopPropagation(); });
```
7.반환 거짓을 사용하여; 또는 e.stopPropogation (); 더 코드 실행을 허용하지 않습니다. 그것은이 시점 자체의 흐름을 중지합니다.

반환 거짓을 사용하여; 또는 e.stopPropogation (); 더 코드 실행을 허용하지 않습니다. 그것은이 시점 자체의 흐름을 중지합니다.
8.(나를 위해 일한) 사람이 요구하면 작성 :

(나를 위해 일한) 사람이 요구하면 작성 :
```
event.stopImmediatePropagation()
```
이 솔루션에서.

9.인라인 대안 :

인라인 대안 :

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

10.여기에 각도를 사용하는 예입니다 2+

여기에 각도를 사용하는 예입니다 2+

당신이 모달 구성 요소를 종료하려는 경우 예를 들어, 사용자가 외부에서 클릭하는 경우 :

// 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();
}

11.당신은 (에 버블 링) 부모 (사업부)에 도달하는 이벤트를 중지해야합니다. 여기에 버블 링에 대한 부분을 참조하십시오 여기에 jQuery를 고유의 API 정보.

당신은 (에 버블 링) 부모 (사업부)에 도달하는 이벤트를 중지해야합니다. 여기에 버블 링에 대한 부분을 참조하십시오 여기에 jQuery를 고유의 API 정보.
12.VAR 내측 = document.querySelector ( "# 내측"); VAR의 외측 = document.querySelector ( "# 아우터"); inner.addEventListener ( '클릭', innerFunction); outer.addEventListener ( '클릭', outerFunction); innerFunction 함수 (이벤트) { event.stopPropagation (); ( "내부 Functiuon")을 CONSOLE.LOG; } outerFunction 함수 (이벤트) { ( "외부 Functiuon")를 CONSOLE.LOG; } <메타 캐릭터 = "UTF-8"> <메타 이름 = "뷰포트"내용 = "= 폭 소자 폭"> <제목> 외부 및 내부 Progration와 프라 모드 Kharade - 이벤트

VAR 내측 = document.querySelector ( "# 내측"); VAR의 외측 = document.querySelector ( "# 아우터"); inner.addEventListener ( '클릭', innerFunction); outer.addEventListener ( '클릭', outerFunction); innerFunction 함수 (이벤트) { event.stopPropagation (); ( "내부 Functiuon")을 CONSOLE.LOG; } outerFunction 함수 (이벤트) { ( "외부 Functiuon")를 CONSOLE.LOG; } <메타 캐릭터 = "UTF-8"> <메타 이름 = "뷰포트"내용 = "= 폭 소자 폭"> <제목> 외부 및 내부 Progration와 프라 모드 Kharade - 이벤트
13.이 인라인 컨텍스트에있는 경우, HTML이 시도 :

이 인라인 컨텍스트에있는 경우, HTML이 시도 :
```
onclick="functionCall();event.stopPropagation();
```
14.당신은 대상이 DIV 요소인지 여부를 확인하고 부모의 다른 클릭 이벤트를 발행 할 수있는 핸들에서 당신 것 "반환"후.

당신은 대상이 DIV 요소인지 여부를 확인하고 부모의 다른 클릭 이벤트를 발행 할 수있는 핸들에서 당신 것 "반환"후.
```
$('clickable').click(function (event) {
    let div = $(event.target);
    if (! div.is('div')) {
       div.parent().click();
       return;
    }
    // Then Implement your logic here
}
```
15.아래의 예에서와 같이 기록 unclickable 일부 서브 엘리먼트에게 CSS 계층 구조를 지정한다.

아래의 예에서와 같이 기록 unclickable 일부 서브 엘리먼트에게 CSS 계층 구조를 지정한다.

클래스와 테이블 내부 TR 내부 TD 내부에 요소 (*)이 예를 들어 I 정지 전파에서 ".subtable"
```
$(document).ready(function()
{    
   $(".subtable tr td *").click(function (event)
   {
       event.stopPropagation();
   });

});
```
16.ignoreParent ()는 순수 자바 스크립트 솔루션입니다.

ignoreParent ()는 순수 자바 스크립트 솔루션입니다.

그것은 자식 요소의 좌표와 마우스 클릭의 좌표를 비교하는 중간 계층으로 작동 / S. 두 가지 간단한 구현 단계 :

페이지에 ignoreParent () 코드를 삽입하십시오.

대신 부모의 원래의 onclick = "parentEvent ();"2. 쓰기 :
```
onclick="ignoreParent(['parentEvent()', 'child-ID']);"
```
당신은 함수에 자식 요소의 수의 ID를 전달하고, 다른 사람을 제외 할 수 있습니다.

당신은 자식 요소 중 하나를 클릭하면 상위 이벤트가 발생하지 않습니다. 당신이 부모를 클릭 아닌 자식 요소 중 하나에서 [인수로 제공] 경우, 상위 이벤트가 발생합니다.

Github에서에 ignoreParent () 코드
17.e.stopPropagation ()는 올바른 솔루션입니다,하지만 당신은 당신의 내면의 앵커로 모든 이벤트 핸들러를 첨부하지 않을 경우, 당신은 단순히 외부 사업부에이 핸들러를 첨부 할 수 있습니다 :

e.stopPropagation ()는 올바른 솔루션입니다,하지만 당신은 당신의 내면의 앵커로 모든 이벤트 핸들러를 첨부하지 않을 경우, 당신은 단순히 외부 사업부에이 핸들러를 첨부 할 수 있습니다 :
```
e => { e.target === e.currentTarget && window.location = URL; }
```

18.경우 다른 사람이 내가 그것을 해결하는 방법입니다, 반작용 사용하여이 문제를 가지고 있었다.

경우 다른 사람이 내가 그것을 해결하는 방법입니다, 반작용 사용하여이 문제를 가지고 있었다.

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) 마우스 클릭 이벤트는 부모 요소의 'closeLogin'기능에 도달하는 것이 방지된다.

이것은 나를 위해 트릭을했고, 나는이 간단한 div의와 모달 효과를 만들 수 있었다.

19.다음과 같이 추가 :

다음과 같이 추가 :

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

또는 false를 반환; #clickable 등에 클릭 핸들러에서 :

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

20.모든 솔루션 및 JScript의 복잡. 여기에 간단한 버전입니다 :

모든 솔루션 및 JScript의 복잡. 여기에 간단한 버전입니다 :

var IsChildWindow=false;

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


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

21.

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

from https://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 관리 jQuery를 플러그인 의존성에 웹팩 (0)	2020.09.25
[JQUERY] 상위 이벤트를 트리거 JQuery와 정지 아이 (0)	2020.09.25
[JQUERY] 현지 날짜 시간에 UTC 날짜 시간 변환 (0)	2020.09.25
[JQUERY] 자바 스크립트로 이미지의 실제 폭과 높이를 가져 오기? (사파리 / 크롬) (0)	2020.09.25
[JQUERY] jQuery로 다단계 양식을 재설정 (0)	2020.09.25

복붙노트

[JQUERY] 어떻게 자식 앵커를 클릭하면 발사에서 부모의 온 클릭 이벤트를 방지합니까?

어떻게 자식 앵커를 클릭하면 발사에서 부모의 온 클릭 이벤트를 방지합니까?

해결법

2.사용 stopPropagation 메소드는, 예를 참조하십시오

3.여기가 아닌 jQuery 코드를 찾고 거기 모두 내 솔루션 (순수 자바 스크립트)

4.당신이 시도 할 수 있습니다

5.당신이 내부 요소와 상호 작용하지 않으려면 / 어떤 경우에요, 다음 CSS 솔루션은 당신을 위해 유용 할 수 있습니다.

6.당신이 클릭 할 수있는 DIV의 여러 요소가있는 경우, 당신은이 작업을 수행해야합니다 :

7.반환 거짓을 사용하여; 또는 e.stopPropogation (); 더 코드 실행을 허용하지 않습니다. 그것은이 시점 자체의 흐름을 중지합니다.

8.(나를 위해 일한) 사람이 요구하면 작성 :

9.인라인 대안 :

10.여기에 각도를 사용하는 예입니다 2+

11.당신은 (에 버블 링) 부모 (사업부)에 도달하는 이벤트를 중지해야합니다. 여기에 버블 링에 대한 부분을 참조하십시오 여기에 jQuery를 고유의 API 정보.

13.이 인라인 컨텍스트에있는 경우, HTML이 시도 :

14.당신은 대상이 DIV 요소인지 여부를 확인하고 부모의 다른 클릭 이벤트를 발행 할 수있는 핸들에서 당신 것 "반환"후.

15.아래의 예에서와 같이 기록 unclickable 일부 서브 엘리먼트에게 CSS 계층 구조를 지정한다.

16.ignoreParent ()는 순수 자바 스크립트 솔루션입니다.

17.e.stopPropagation ()는 올바른 솔루션입니다,하지만 당신은 당신의 내면의 앵커로 모든 이벤트 핸들러를 첨부하지 않을 경우, 당신은 단순히 외부 사업부에이 핸들러를 첨부 할 수 있습니다 :

18.경우 다른 사람이 내가 그것을 해결하는 방법입니다, 반작용 사용하여이 문제를 가지고 있었다.

19.다음과 같이 추가 :

20.모든 솔루션 및 JScript의 복잡. 여기에 간단한 버전입니다 :

21.

'JQUERY' 카테고리의 다른 글

티스토리툴바