引导下拉列表中的JS clickEvent目标

Question

我正在尝试找出clickEvent对象是如何触发的。这是Codepen链接

https://codepen.io/rpmcmurphy/pen/WNegvQd?editors=1011

在这里，当我点击下拉项时，clickEvent会被触发，但当点击按钮时，它不会触发。没有太多的文档可以找到clickEvent是什么以及如何触发它。

这是代码-

HTML

<div class="dropdown">
  <button class="btn mt-5 ml-5 dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <button class="dropdown-item" href="#">Something else here</button>
  </div>
</div>


<button class="btn mt-2 ml-5 ola">Ola</button>

JS

 $('.dropdown').on('hide.bs.dropdown', function (e) {
  console.log(e.clickEvent.target);
});

$('.ola').on('click', function(e) {
   console.log(e.clickEvent.target);
});

Answer 1

从日志中删除clickEvent，只使用"e.target“

Answer 2

正在触发click事件。只是你在你的.ola函数中收到的对象和你的其他函数不一样。

如果您需要直接访问该元素，则可以编写

$('.ola').on('click', function(e) {
   console.log(e.currentTarget);
});

为了便于将来参考，如果您在控制台中看到错误，查看整个对象而不仅仅是它的属性通常会有所帮助。

例如。

$('.ola').on('click', function(e) {
   console.log(e);
});