从另一个对象的点击事件里手动触发jQuery点击事件

Question

我正在开发一个小型Web应用程序，在其中单击一个div元素（称其为元素“A”）需要更改它本身和另一个div元素（称其为元素“B”）的位置，反之亦然。

功能应该类似于以下内容：

Click 'A' {
  A is moved some number of pixels closer to the mouse position (making use of jQuery's .pageX and .pageY event object properties)
  B's click event is manually triggered, moving it some number of pixels closer to the mouse
}

我想绑定点击事件处理程序到A和B。如果单击A，我会手动触发B的点击事件（使用jQuery的.trigger()），反之亦然。不幸的是，从另一个对象的处理程序内手动触发一个对象的点击事件对我来说不起作用 - 例如，在上面的示例中，当触发div B的点击事件时，我无法检索pageX和pageY属性。

我在这里包含了一个示例来说明这一点：http://jsfiddle.net/tZFNk/2/。

感谢您的帮助。

- Al R.

Answer 1

您拼错了单词"question"。请尝试：

$('#aQuestion').trigger('click');

替代

$('#aQestion').trigger('click');

- Andomar

---

感谢你发现了那个拼写错误。我已经纠正了，并且改用了'.triggerHandler()'，但是pageX和pageY仍然未定义... - Al R.

@AlR，这是因为您通过程序触发了点击事件。 - Rafay

选择器选错并不是真正的问题。@3nigma，你懂了！ - nachito

Answer 2

$('#aQuestion').click();

或者

$("#aQuestion").trigger('click');

你有一个拼写错误

http://jsfiddle.net/tZFNk/7/

- Rafay

Answer 3

使用第一个事件的pageX和pageY属性触发事件。

$('#aQuestion').bind('click', function(e, f){
    // Use the original pageX property if it exists, else use pageX set by triggered event.
    if (e.pageX !== undefined) {
        alert('x-pos: ' + e.pageX + ', y-pos: ' + e.pageY);
    } else {
        alert('x-pos: ' + f.pageX + ', y-pos: ' + f.pageY);
    }
});

$('#aDiv').bind('click',function(e){
    // Trigger event on #aQuestion with the current click coordinates.
    $('#aQuestion').trigger('click', { pageX: e.pageX, pageY: e.pageY });
    alert('Nothing happens!')
});

http://jsfiddle.net/tZFNk/20/

- nachito

Answer 4

事件的属性似乎没有正确传播，就像nachito在他的回答中已经指出的那样。然而，您不必构造并分配值到一个新对象，只需将“e”对象传递给触发函数即可：

$('#aQuestion').bind('click',function(e, evt){
    var pageX = e.pageX || evt.pageX;
    var pageY = e.pageY || evt.pageY;
    alert('x-pos: ' + pageX + ', y-pos: ' + pageY);
});

$('#aDiv').bind('click',function(e){
    $('#aQuestion').trigger('click', e);
    alert('Nothing happens!')
});

- Abbas

Answer 5

    $(document).ready(function(){

        $("#button2").each(function(){
            var buttonOld = this;
            $('#button1').bind('click',function(){$(buttonOld).trigger('click')});
        })
    })

- nishant baranwal