2011-12-19 20 views
3

我正在一個小的web應用程序中點擊一個div(稱爲它的元素「A」)需要改變它自己和另一個div的位置(稱之爲元素「B」),反之亦然。從另一個對象的單擊事件中手動觸發jQuery單擊事件

的功能會去是這樣的:

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 
} 

我想我會只是綁定點擊事件處理既& B.如果被點擊我要手動觸發B的單擊事件(使用jQuery的.trigger (),反之亦然。不幸的是,從另一個對象的處理程序中手動觸發一個對象的click事件對我不起作用 - 例如在上面的示例中,當觸發div B的click時,我無法檢索pageX和pageY屬性事件

我已經包含了一個例子來說明這一點:http://jsfiddle.net/tZFNk/2/

歡呼聲,並提前感謝您的幫助。

回答

2

使用第一個事件的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/

6

你把單詞「問題」拼寫錯了。嘗試:

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

,而不是

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

感謝拿起那個錯字。我糾正了這一點,並切換到「.triggerHandler()」,但pageX和pageY仍未定義... – 2011-12-19 19:25:35

+2

@AlR。那是因爲您以編程方式觸發了點擊操作 – Rafay 2011-12-19 19:26:45

+0

選擇器出錯並不是真正的問題。 @ 3nigma,你明白了! – nachito 2011-12-19 19:43:50

1

事件性質似乎並沒有被正確傳播,如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!') 
}); 
0
$(document).ready(function(){ 

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