인라인 onclick 속성으로 이벤트 전파를 중지하는 방법은 무엇입니까?

다음을 고려하세요:

<div onclick="alert('you clicked the header')" class="header">
  <span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>

사용자가 범위를 클릭 할 때 div의 클릭 이벤트가 발생하지 않도록하려면 어떻게해야합니까?

event.stopPropagation ()을 사용하십시오 .

<span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span>

IE의 경우 : window.event.cancelBubble = true

<span onclick="window.event.cancelBubble = true; alert('you clicked inside the header');">something inside the header</span>

함수 안에서 이벤트 객체를 얻는 방법은 두 가지가 있습니다.

1. W3C 호환 브라우저 (Chrome, Firefox, Safari, IE9 +)의 첫 번째 주장
2. Internet Explorer의 window.event 객체 (<= 8)

W3C 권장 사항을 따르지 않는 레거시 브라우저를 지원해야하는 경우 일반적으로 함수 내에서 다음과 같은 것을 사용합니다.

function(e) {
  var event = e || window.event;
  [...];
}

먼저 하나를 확인한 다음 다른 하나를 확인하고 이벤트 변수에서 찾은 것을 저장하십시오. 그러나 인라인 이벤트 핸들러에는 e사용할 객체 가 없습니다 . 이 경우 arguments항상 사용 가능한 컬렉션을 활용 해야하며 함수에 전달 된 전체 인수 세트를 나타냅니다.

onclick="var event = arguments[0] || window.event; [...]"

그러나 일반적으로 전파 중지와 같은 복잡한 작업이 필요한 경우 인라인 이벤트 핸들러를 피해야합니다. 이벤트 처리기를 개별적으로 작성하고 요소에 첨부하는 것은 가독성과 유지 관리 성을 위해 중장기 적으로 훨씬 더 좋습니다.

window.event는 FireFox에서 지원되지 않으므로 다음 행을 따라야합니다.

e.cancelBubble = true

또는 FireFox에 W3C 표준을 사용할 수 있습니다.

e.stopPropagation();

화려하고 싶다면 다음과 같이하십시오.

function myEventHandler(e)
{
    if (!e)
      e = window.event;

    //IE9 & Other Browsers
    if (e.stopPropagation) {
      e.stopPropagation();
    }
    //IE8 and Lower
    else {
      e.cancelBubble = true;
    }
}

이 기능을 사용하면 올바른 방법이 있는지 테스트합니다.

function disabledEventPropagation(event)
{
   if (event.stopPropagation){
       event.stopPropagation();
   }
   else if(window.event){
      window.event.cancelBubble=true;
   }
}

같은 문제가 있습니다-IE의 JS 오류 상자-이것은 내가 볼 수있는 한 모든 브라우저에서 제대로 작동합니다 (event.cancelBubble = true는 IE에서 작업을 수행함)

onClick="if(event.stopPropagation){event.stopPropagation();}event.cancelBubble=true;"

이것은 나를 위해 일했다

<script>
function cancelBubble(e) {
 var evt = e ? e:window.event;
 if (evt.stopPropagation)    evt.stopPropagation();
 if (evt.cancelBubble!=null) evt.cancelBubble = true;
}
</script>

<div onclick="alert('Click!')">
  <div onclick="cancelBubble(event)">Something inside the other div</div>
</div>

MVC가 아닌 ASP.NET 웹 페이지 Sys.UI.DomEvent의 경우 기본 이벤트의 래퍼로 객체를 사용할 수 있습니다 .

<div onclick="event.stopPropagation();" ...

또는 내부 함수에 매개 변수로 이벤트를 전달하십시오.

<div onclick="someFunction(event);" ...

그리고 어떤 기능에서 :

function someFunction(event){
    event.stopPropagation(); // here Sys.UI.DomEvent.stopPropagation() method is used
    // other onclick logic
}

이 페이지 에 따르면 IE에는 다음이 필요합니다.

event.cancelBubble = true

나는 Karma 때문에 주석을 달 수 없으므로 이것을 전체 답변으로 작성하십시오 : Gareth의 답변에 따르면 (var e = arguments [0] || window.event; [...]) 빠른 해킹 :

<div onclick="(arguments[0] || window.event).stopPropagation();">..</div>

늦었다는 것을 알고 있지만 이것이 한 줄로 작동한다는 것을 알려 드리고자합니다. 중괄호는 두 경우 모두 stopPropagation 함수가 첨부 된 이벤트를 반환하므로 if 및 ... 에서처럼 중괄호로 묶으려고했습니다. :)

이것은 또한 작동합니다-링크 HTML에서 다음과 같이 onclick을 사용하십시오 :

<a href="mypage.html" onclick="return confirmClick();">Delete</a>

그리고 comfirmClick () 함수는 다음과 같아야합니다.

function confirmClick() {
    if(confirm("Do you really want to delete this task?")) {
        return true;
    } else {
        return false;
    }
};

클릭 한 요소를 확인하는 것이 어떻습니까? 당신이 뭔가를 클릭하면 window.event.target클릭 된 요소에 할당, 및 클릭 한 요소는 인수로 전달 될 수있다.

대상과 요소가 동일하지 않은 경우 전파 된 이벤트입니다.

function myfunc(el){
  if (window.event.target === el){
      // perform action
  }
}
<div onclick="myfunc(this)" />

<div onclick="alert('you clicked the header')" class="header">
  <span onclick="alert('you clicked inside the header'); event.stopPropagation()">
    something inside the header
  </span>
</div>

가장 좋은 해결책은 javascript 함수를 통해 이벤트를 처리하는 것이지만 html 요소를 직접 사용하여 간단하고 빠른 솔루션을 사용하기 위해서는 "event"및 "window.event"가 더 이상 사용되지 않으며 보편적으로 지원되지 않습니다 ( https://developer.mozilla.org/en-US/docs/Web/API/Window/event ) 다음과 같은 "하드 코드"를 제안합니다.

<div onclick="alert('blablabla'); (arguments[0] ? arguments[0].stopPropagation() : false);">...</div>