使用没有元素 ID 的 javascript 模拟点击

Question

<button 
   type="button" 
   class="blue" 
   data-events="click:onAddNote" 
   data-events-target="cpoe-LabResultDetailView"
>
   Add Note
</button>

我正在尝试在按下快捷键序列时模拟/提示单击此按钮。然而，除了 class “blue”，我没有任何成功，它有效但也激活了其他东西。如何定位“数据事件”或“数据事件目标”？

有没有办法实现类似于： $("click:onAddNote").trigger("click");

Answer 1

为什么不只是这个？

const button = docuemnt.querySelector('button')
button.click()

Answer 2

select <button> 元素有很多方法。

方法一

在下面的示例中，click 事件由 select 应用了 .blue class 样式的第一个 <button> 元素触发。

let button = document.getElementsByClassName('blue');

button[0].addEventListener('click', function() {
  console.log("clicked");
});

<button type="button" class="blue">Add Note</button>

方法二

使用jQuery应用.blueclass样式的<button>元素的click事件可以呈现如下：

$(".blue").on('click', function(event) {
  console.log("clicked");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" class="blue" data-events="click:onAddNote" data-events-target="cpoe-LabResultDetailView">Add Note</button>

Answer 3

您可以使用 querySelector 和 select 按钮及其属性

var button = document.querySelector('[data-events="click:onAddNote"]');
button.onclick = ()=>console.log('Clicked');
button.click()

<button 
   type="button" 
   class="blue" 
   data-events="click:onAddNote" 
   data-events-target="cpoe-LabResultDetailView"
>
   Add Note
</button>

Answer 4

定位“data-events”属性很简单，就像这样...

$('button[data-events="click:onAddNote"]').on('click', function(){
  console.log('clicked!');
});

<button 
   type="button" 
   class="blue" 
   data-events="click:onAddNote" 
   data-events-target="cpoe-LabResultDetailView"
>
   Add Note
</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

有关运行处理程序的更多信息，请参阅 jquery 文档 -- Here

使用没有元素 ID 的 javascript 模拟点击

Simulate click with javascript with no element ID

javascript

click

simulate

方法一

方法二