mouseDownでクラスまたはID値を取得する

Question

デフォルトの右クリックメニューを止めて自分で作成したいのですが、その前にmouseDownでクラスとIDデータを取得する必要があります。そのクラス名またはIDの特定のデータ。

ここで問題は、私がidとクラスの値を取得する唯一のことは、私がclassNameとIdの両方を持っていても定義されていないことです。

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

EDITED：$（ '体'）$（文書）に、私は同じ問題を抱えているが、私はによっていくつかのデータを取得しようとすると、ドキュメントをクリックする私がクリックした要素を取得するには、右クリックしてチェックする必要があります。

Answer 1

それはあなたがクリックハンドラを添付するものであるため、問題が$(this)は、bodyタグを返したということでした。実際にクリックされたものにはe.targetでアクセスできます。新しいスニペットをご覧ください。

$('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

あなたはbodymousedownイベントを処理しているので、これが起こっている理由があります。あなたのハンドラでは、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変数を設定しました。要素が常に1つのクラスを持つと仮定したくないかもしれません。