2012-06-24 47 views
1

如果我有一些HTML這樣的:事件/對象中的JavaScript功能

<a onmouseover='SetTopLeft(this);'href='#'>Click me!</a> 

我能得到這兩個對象,並在該函數的事件?所以,例如,我可以有這樣的方法簽名嗎?

function SetTopLeft(e, o) 

...其中e是事件,o是'這個'?我可能實際上不需要這個對象,但我想我可能需要這個事件。我不介意更好地理解JavaScript是如何工作的 - 即,何時/如何傳遞事件以及何時/如何傳遞調用對象?我可以選擇通過哪一個?我可以通過嗎?

基本上,我真正需要做的是在錨點所在的DIV內獲得鼠標座標(即使該DIV只是網頁的一部分,以及瀏覽器是否全屏)我很難完成它。我已經看到,在某個元素中獲取這些座標的大多數示例都使用該事件以及該事件的pageX和pageY屬性。

順便說一句,這必須在IE 6以上工作。 Firefox也會很好。其他沒有必要。

回答

3

是的,在嵌入代碼this引用該元素的HTML DOM對象,而event引用該事件對象。所以,你可以做到以下幾點:

HTML

<a onmouseover='SetTopLeft(event, this);' href='#'>Click me!</a> 

的JavaScript

function SetTopLeft(e, obj) {...} 
+0

所以人們可以通過1)既不,2)元素,或3)事件和元素?這些總是3種選擇嗎? – birdus

+0

四個選項:既不是,只有元素,只有事件,或兩者。它們都可以通過內聯代碼獲得。你傳遞給函數的數量是多少,並且按照什麼順序取決於你。 –

+0

我想我看到:CallingMethod(),CallingMethod(event),CallingMethod(this),然後調用方法(event,this)或CallingMethod(this,event)。我認爲把「事件」放在第一位是公約,因爲這是你展示的。謝謝! – birdus

3

一般來說,你應該避免使用內聯事件處理程序。它將表示(HTML)與邏輯(JavaScript)混合在一起。 quirksmode.org提供了一個不錯的collection of articles所有關於事件處理的知識。

由於在事件處理中,this通常是指元件的處理程序綁定到,還可以顯式地設置this到元件和傳遞事件對象作爲第一個參數:

<a onmouseover='SetTopLeft.call(this, event);'href='#'>Click me!</a> 

更多見.call()[MDN]信息。除此之外,如果你的鏈接沒有鏈接到任何東西,最好使用一個簡單的span元素或一個按鈕,並相應地設置它的樣式。

+0

感謝您的提示!我會閱讀它。 – birdus

+0

如果您使用跨度這樣的功能,一定要添加'tabindex = 0',使用鍵盤導航的人可以集中元素。 – steveax

+0

[你認爲](http://meta.stackexchange.com/q/137491/173320)? – gdoron