Question

试着用我当前非常有限的JavaScript知识来获得一些乐趣。

为什么这不起作用？我做错了什么？

HTML

<body>

<input type="button" value="Click me" id="button" />

</body>

的Javascript

var x = e.clientX;
var y = e.clientY;

var p = document.getElementById("button");

function mousedown() {
    if (p.mousedown) {
        alert(x, y);
    }
}

Answer 1

您尝试从mousedown函数之外的事件中获取值（即在事件存在之前）
您永远不会将mousedown函数指定为事件处理程序
您不接受mousedown函数
您在mousedown函数中测试mousedown 属性，无明显原因
您将多个参数传递给alert

所以要解决它：

function mousedownHandler(e) {
    var x = e.clientX;
    var y = e.clientY;
    alert(x + ", " + y);
}

var p = document.getElementById("button");
p.addEventListener('mousedown', mousedownHandler);

Answer 2

您必须将click或mousedown事件附加到元素。在函数内部，您可以获取事件并从中检索clientX和clientY。

<强>的JavaScript

var p = document.getElementById("button");

p.onclick = function mousedown(e) {
    var x = e.clientX;
    var y = e.clientY;
    alert(x + ' ' + y);
}

<强>演示

http://jsfiddle.net/8gzMj/

Answer 3

e不是全局变量。通常e是与事件处理程序关联的事件：

       function mousedownHandler(e)
       {
           //manage the event
           console.log(e.clientX, e.clientY);
       }

事件处理程序应绑定到相应的事件：

  var p = document.getElementById("button");
  p.onmousedown = mousedownHandler;

Here是jsFiddle中示例的运行分支。

Answer 4

首先，您需要将一个事件附加到元素。然后你需要传递'e'或事件。然后你可以阅读它的属性。

var p = document.getElementById("button");

p.addEventListener('mousedown', mousedown);

function mousedown(e) {
    var x = e.clientX;
    var y = e.clientY;

    alert(x, y);

}

http://jsfiddle.net/cSUfL/

Answer 5

你没有调用该函数，你必须使用这个

  <body>

 <input type="button" value="Click me" id="button" onClick="mousedown()" />

 </body>

Answer 6

<!DOCTYPE html>
<html>
<head>
    <title>HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function mousedown(e) {
            var x = e.clientX;
            var y = e.clientY;
            alert(x + "\n" + y);
        }
    </script>
</head>
<body>
    <table>
        <input type="button" value="Click me" id="button" onmousedown="mousedown(event);" />
        <!-- alternatively -->
        <button id="button2" onmousedown="mousedown(event)">Click me</button>
    </table>
</body>
</html>

为什么这个基本的JavaScript事件不起作用？

6 个答案: