如何通过onclick属性获取鼠标事件？

当然可以获取鼠标事件对象！HTML的onclick属性和JavaScript的addEventListener方法一样，能够访问到对应的鼠标事件参数，只是写法上略有区别。下面给你两种常用的实现方式：

• 直接在onclick属性内使用事件对象
  你可以直接在onclick的字符串代码里使用event关键字来访问鼠标事件对象。比如想要获取点击时鼠标的X坐标，代码可以写成这样：

  <div onclick="alert('鼠标X坐标：' + event.pageX)"></div>
  

  这里的event就是点击触发的鼠标事件对象，和你用addEventListener时拿到的e是同一个东西，像pageY、clientX、target这类常用的事件属性都能正常调用。

• 调用外部函数并传递事件对象
  如果你的点击逻辑比较复杂，想把处理代码抽成单独的函数，只需要把event作为参数传递给函数即可：

  <div onclick="handleClick(event)"></div>
  
  <script>
    function handleClick(e) {
      console.log('鼠标X坐标：', e.pageX);
      console.log('触发事件的元素：', e.target);
      // 这里可以添加更多复杂的处理逻辑
    }
  </script>
  

  这样函数里的参数e就接收到了鼠标事件对象，用法和addEventListener里的事件参数完全一致。

需要提醒的是，event变量是HTML事件处理属性作用域里自动提供的，不需要你额外声明，直接拿来用就好。

内容的提问来源于stack exchange，提问作者Alkis Mavridis