带有事件的触发元素函数

Trigger element function with event

本文关键字：元素 函数 事件      更新时间：2023-09-26

我做了这个片段，所以你可以知道我真正的问题是什么：

$('#test1').on('touchstart mousedown', function(e){
  $('#output').val(e.pageY);
});
$('#test2').on('touchstart mousedown', function(e){
  $('#test1').trigger('touchstart mousedown');
});
button {
  height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<button id="test1">test1</button>
<button id="test2">test2</button>
<input type="text" id="output">

如您所见，单击button#test1时它会正确输出值，但是如果我需要从另一个元素触发其操作（在此代码段中，button#test2）...它不起作用。

我认为e事件没有通过$.trigger.

有人知道任何技巧，或者有任何想法吗？提前谢谢。

一个现场小提琴

试试这个：

$('#test1').on('touchstart mousedown', function(e){
  $('#output').val(e.pageY);
});
$('#test2').on('touchstart mousedown', function(e){
  $('#test1').trigger(e);
});

来自 jQuery trigger() 文档 （http://api.jquery.com/trigger/）：

事件

对象始终作为第一个参数传递给事件处理程序。参数数组也可以传递给 .trigger（） 调用，这些参数也将在事件对象之后传递给处理程序。从jQuery 1.6.2开始，单个字符串或数字参数可以在不包装在数组中的情况下传递。

对于您的代码，这可能如下所示：

$('#test1').on('touchstart mousedown', function(e, triggerParam){
    $('#output').val(e.pageY || triggerParam);
});
$('#test2').on('touchstart mousedown', function(e){
     $('#test1').trigger('touchstart', e.pageY);
});

但总的来说（我只是提到这一点，因为我认为这是更好的做法）编写一个额外的函数，由听众调用。不要让侦听器处理实际操作。最好让它根据事件委托给其他功能。

使用标记的快速示例：

function updateOutput( input ) {
    $("#output").val(input);
}
$('#test1').on('touchstart mousedown', function(e){
    updateOutput(e.pageY);
});
$('#test2').on('touchstart mousedown', function(e){
    updateOutput(e.pageY);
});

通过这种方式，您将以更快、更全面的方式查看每个侦听器和函数的实际操作。希望对您有所帮助。

你想用触发器传递参数：

var event = jQuery.Event( "touchstart" );
event.pageY = 999;
$('#test1').trigger(event);
相关文章：