오브젝트 외부에서 onclick 액션 수행하기

자바 스크립트를 만들려고하는데, 화면의 아무 곳이나 클릭하면 오브젝트에서 약간의 코드가 수행됩니다. (대화 상자를 닫으려면 야간 모드를 제거하십시오.)오브젝트 외부에서 onclick 액션 수행하기

//Imagine some CSS declaring that FPAGE takes up 100% of the screen. 
<div id="FPAGE" onclick="return outClick();"> 
    <script> 
     function outClick() { 
      var o=document.getElementsByClassName('objects'); 
      //What now? 
     } 
    </script> 
    <center> 
     <object class="objects" width="500px" height="500px"></object> 
     <br /> 
     <object class="objects" width="500px" height="500px"></object> 
    </center> 
</div>

저는 무엇을해야하는지 잘 모르겠습니다. 몇 가지 sudo 코드에 대해 생각해 봤지만 이것이 자바 스크립트에서 할 수 있는지는 알 수 없습니다.

var o=document.getElementsByClassName('objects'); 
//What now? 
if (onclick!=o) { 
    //insert code here 
}

해결책 :

<script> 
document.onclick = function(e) { 
    var o=document.getElementsByClassName('objects'); 
    if (e.target.nodeName != 'o') { 
     //Code here! 
    } 
}; 
</script> 
<center> 
    <object class="objects" width="500px" height="500px"></object> 
    <br /> 
    <object class="objects" width="500px" height="500px"></object> 
</center> 
</div>

출처

2013-01-20 KleptoKat

_ "내가 무엇을해야하는지 잘 모르겠다"라는 질문을하지 않는 자바 스크립트 자습서. – gdoron

무엇을하려고합니까? 예상되는 결과는 무엇입니까? 생생하게 설명해주십시오. – enginefree

기본적으로 배경이 검은 색이되는 스트림의 야간 모드입니다. 그러나 스트림을 클릭하면 아무 때나 클릭하면 다시 주간이됩니다. – KleptoKat

(감사 다윗에게) 그런 다음 전체 페이지에 클릭 이벤트를 추가 대상이 클릭의 개체가 여부 확인 (또는 수 아마도 그 객체의 자손). 이런 식으로 뭔가 :

document.onclick = function(e) { 
    if (e.target.nodeName != 'OBJECT') { 
     // the click happened on a non-object (probably "outside") 
    } 
};

데모 : http://jsbin.com/elikum/1

자바 스크립트 이벤트가 당신이 jQuery를 같은 라이브러리가 쉽게 이벤트 처리를 만들기 위해 고려할 수 있도록 대상 고객에 따라, 기존 브라우저에서 정상화하기 어려운 것을 기억하십시오.

출처

2013-01-20 02:18:26 David

그게 효과가 있어요. 고마워. 일단 내가 평판을 얻으면 투표 할거야. – KleptoKat

그래서 당신이 찾고있는 답변을 얻었습니다.

그건 그렇고;

document.getElementsByClassName은 "NodeList"또는 "HTMLCollection"(참조 : https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName)을 반환합니다.

노드에 이벤트를 첨부하려면 for-next 메소드가 필요합니다.

// i.e 
var els = document.getElementsByClassName('objects'), 
    el, i; 
for (i = 0; i < els.length; i++) { 
    el = els[i]; 
    el.onclick = function() { 
    // ... 
} 

// or 
while (el = els[i++]) { 
    el.onclick = // ...

출처

2013-01-20 02:32:03

예제를 사용하여 이벤트의 대상 속성을 확인하여 실제로 클릭 한 요소를 확인하기 만하면됩니다. 'objects'클래스는 실제로 필요하지 않습니다. 대신 다른 사람들이 답변에서 tagName을 확인하도록 수정할 수 있습니다. 내가 추가 한 클래스 이름 검사는 이상적이지 않습니다. 왜냐하면 'objects'라는 단어를 포함하는 클래스가 더 긴 클래스 이름을 갖고 있더라도 통과 할 것이기 때문입니다. jQuery와 같은 라이브러리를 사용하면 쉽게 사용할 수 있습니다.

시도해보십시오.이 html을 파일에 드롭하고 브라우저에로드하십시오.

<html> 
    <head> 
     <script> 
      function outClick(event) { 
        if(event.target.className.indexOf('objects') > -1) { 
        alert("is object"); 
       } else { 
        alert("not object"); 
       } 
      } 
     </script> 
     <style> 
      html,body,#FPAGE { height:100% } 
     </style> 
    </head> 
    <body> 
     <div id="FPAGE" onclick="outClick(event)"> 
      <center> 
       <object class="objects" width="500px" height="500px">OBJECT</object> 
       <br /> 
       <object class="objects" width="500px" height="500px">OBJECT2</object> 
      </center> 
     </div> 
    </body> 
</html>

출처

2013-01-20 02:52:28

당신이 이미 객체에 대한 이벤트 핸들러가있는 경우 단지 event.stopPropagation를 추가, 당신은 나 (event.stopPropgation을하고, 클릭을 처리하지 않는 개체에 대한 이벤트 처리기를 추가 청소기 것 그들에게), 전체 페이지에 대한 이벤트 핸들러를 추가하십시오.

var objects=document.GetObjectsByClassName('objects'); 
for (var i=0, len=objects.length; i<len; i++) { 
    objects[i].addEventListener("click",function(event){event.stopPropagation();}); 
} 
document.addEventListener("click",...)

이 방법은 응용 프로그램이 발전함에 따라 더 강력한 될 것입니다, 당신은 당신이 클릭을 처리 할 수 없습니다있는 항목을 추가 - 문서 이벤트 핸들러의 문, 당신이 할 수있는 경우 몬스터를 구축 비교 개별 요소 레벨에서 비헤이비어를 지정하십시오 (클릭 억제 여부).

출처

2013-01-20 03:53:08

오브젝트 외부에서 onclick 액션 수행하기

답변

관련 문제