mouseDown에서 클래스 또는 id 값 가져 오기

Question

마우스 오른쪽 단추로 클릭 메뉴를 중지하고 내 자신을 만들기를 원하지만 mouseDown에서 그 전에 클래스 및 ID 데이터를 가져와야합니다. 그러면 마우스 오른쪽 단추를 클릭하여 메뉴를 열 수 있습니다. 해당 클래스 이름 또는 ID에 대한 특정 데이터

이제 문제는 내가 className과 Id를 모두 가지고도 id와 class 값이 정의되지 않는다는 것입니다.

HTML :

 <div class='someClassName' id='someId'>someText</div> 
     <div class='pss'><div class='ps' id='pS123'>Some data</div></div> 

JS :

document.oncontextmenu = function() {return false;}; 

    $(document).mousedown(function(e){ 
    var id = $(this).attr('id'); 
    var clas = $(this).attr('class'); 
     console.log("id: "+id+"/class: "+clas); 
    if(e.button==2){ 
     console.log("id: "+id+"/class: "+clas); 
     if(id=="" && clas==""){ 
      console.log("id: "+id+"/class: "+clas); 
     }else{ 
      if(clas=="someClassName"){ 
       $(document).mousemove(function(event){ 
        var xPos = event.pageX; 
        var yPos = event.pageY; 
        console.log('xPos: '+xPos+'px;/yPos: '+yPos+'px;'); 
       }); 
      } 
     } 
     return false; 
     } 
    return true; 
    }); 

편집 : $ $ (문서)하지만이 같은 문제를 가지고,하지만 난하여 일부 데이터를 얻을 때까지 ('몸') 문서를 클릭하십시오 내가 클릭 한 요소를 얻으려면 마우스 오른쪽 단추로 확인해야합니다.

Answer 1

문제는 그 당신이 클릭 처리기를 부착 무엇 때문에 $(this) 몸 태그를 반환 한 것이 었습니다. e.target으로 실제로 클릭 한 항목에 액세스 할 수 있습니다. 새로운 스 니펫보기. 당신이 bodymousedown 이벤트를 처리하기 때문에

$('body').contextmenu(function(e) { 
 
     var id = $(e.target).attr('id'); 
 
     var clas = $(e.target).attr('class'); 
 
     console.log("id: "+id+"/class: "+clas); 
 
     if(id=="" && clas==""){ 
 
      console.log("id: "+id+"/class: "+clas); 
 
     }else{ 
 
      if(clas=="someClassName"){ 
 
       $(document).mousemove(function(event){ 
 
        var xPos = event.pageX; 
 
        var yPos = event.pageY; 
 
        console.log('xPos: '+xPos+'px;/yPos: '+yPos+'px;'); 
 
       }); 
 
      } 
 
     } 
 
     return false; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='someClassName' id='someId'>someText</div> 
 
     <div class='pss'><div class='ps' id='pS123'>Some data</div></div>

Answer 2

난 당신이 $ ('몸')을 대체 할 수있는 생각과 mousedown :.

$('.youClassName').on('contextmenu', function(e) 
{ 
    var id = $(this).attr('id'); 
    className = $(this).attr('class'); 
    //your actions 
}); 

Answer 3

이 일어나고있는 이유입니다. 처리기에서 this은 body을 나타냅니다. body에는 id 또는 class이 없을 수 있습니다. 특정 요소 이벤트를 처리해야합니다. 예를 들어 :

$('.someClassName').on('contextmenu', function(e) 
{ 
    var id = $(this).attr('id'); 
    var clas = $(this).attr('class'); 
    console.log("id: "+id+"/class: "+clas); 
    //etc 
}); 

Answer 4

그것은 당신이 this 함수에 이해하지 않을 수 있습니다처럼 들린다. 이벤트 처리기의 경우 this (뿐만 아니라 jQuery의 $(this))은 핸들러가 첨부 된 요소를 참조합니다. $(document).on('mousedown', ...)의 경우 함수의 $(this)은 전체 문서를 참조합니다. 다행히도 전달한 함수는 선택된 요소에 대한 참조를가집니다. 목표.

바닐라 JS

document.onmousedown = function(ev){ 
    var document = this; 
    var target = ev.target; 
} 

는 jQuery를

$(document).on('mousedown', function(ev){ 
    var document = $(this); 
    var target = ev.target; 
}) 

target 가변 문서 내부 mousedowned 한 요소이다. 거기에서, 당신은 목표로 정해진 요소의 속성을 얻을 수 있습니다.대상 노드가 DOM 노드가 될 것입니다. $()에 포장하여 jQuery 객체로 만들고 싶습니다.

바닐라 JS

document.onmousedown = function(ev){ 
    var document = this; 
    var target = ev.target; 
    var id = target.id; 
    var classes = target.className.split(' '); 
} 

jQuery를이

$(document).on('mousedown', function(ev){ 
    var document = $(this); 
    var target = $(ev.target); // jQuery wrapped target 
    var id = target.attr('id'); 
    var classes = target.attr('class').split(' '); 
}) 

내가 대신 문자열을 기대 목록에 classes 변수를 설정했습니다. 요소에 항상 하나의 클래스가 있다고 가정하지 않을 수도 있습니다.