香草JS

Question

我想停止默认右键单击菜单并制作我自己的菜单，但在此之前我需要获取class和id数据，所以当我检查它是否右键单击以打开具有该类名称的特定数据的菜单或标识。

现在的问题是，即使我同时拥有className和Id，我唯一得到的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; 
  });

编辑：$（＆＃39; body＆＃39;）到$（文档）但是我有同样的问题，但当我尝试通过点击文档获取一些数据时，我确实得到了我点击的所需元素通过右键单击检查。

Answer 1

问题是$(this)正在返回正文标记，因为这是您将点击处理程序附加到的内容。您可以访问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

我认为你可以用以下内容替换$（＆＃39; body＆＃39;）。mousedown：

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

Answer 3

发生这种情况的原因是您正在处理body mousedown事件。在您的处理程序中，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变量是在文档中被置换的元素。从那里，您可以获得目标元素的属性。请注意，目标将是一个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变量设置为列表而不是期望字符串。可能不想假设元素总是有一个类。

在mouseDown上获取class或id值

4 个答案:

香草JS

的jQuery

香草JS

的jQuery