Question

我正在尝试为javascript实现拖放。我需要传递事件，但它返回undefined。我已经尝试直接传递window.event。不能正常工作

var lens = svg.append("circle")
.attr("id","lens")
.attr("class","draggable")
.attr("cx",40)
.attr("cy",40)
.attr("r",40)
.style("fill","grey");

//Setting click handler
lens.on("click",function(e){
selectElement(e)});

 function selectElement(e) {       
     console.log(window.event); //This prints UNDEFINED
     console.log(e);  //This prints UNDEFINED

    var evt = e || window.event;    
     console.log(evt);  //This prints UNDEFINED
 }

Answer 1

SVG使用evt来监控事件。请尝试以下方法：

<!DOCTYPE HTML>
<html>
<head>
  <title>SVG evt</title>
</head>
<body>
<svg width=400 height=400>
<circle id=myCircle cx=200 cy=200 r=100 fill=blue stroke=none onClick=showEvt(evt) />
</svg>
<script>
function showEvt(evt)
{
    var target=evt.target
    console.log(target.getAttribute("id"))

}
</script>
</body>
</html>

Answer 2

你检查过jQuery UI吗？ https://jqueryui.com/这可能有所帮助您。这是拖放的基本设置：

$( function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  } );
  </script>

关于您的点击事件，请尝试以下操作：

$('#id').click(function(){
  $(this).data('clicked', true);
});

Answer 3

这是一个Javascript鼠标事件教程的链接，它允许您在不使用jQuery或其他库的情况下绑定鼠标事件：

JavaScript Mouse Events

有一个小小的例子：

https://jsfiddle.net/iamthejonsmith/q0sc4mae/

和示例代码：

<input type="button" value="click me" id="btn">
<input type="button" value="right-click me" id="btn2">



document.getElementById('btn').onclick = function() {
  alert('click!')
}

document.getElementById('btn2').oncontextmenu = function() {
  alert('right click!')
}

如何在javascript中传递鼠标单击事件？

3 个答案: