麻煩的Javascript事件

只有今天處理我想出如何事件傳播的作品，並闡明瞭傲慢，以測試它在我現有的代碼基礎，但arghhhhhhh你這該死的javascript ......似乎沒有什麼是簡單足以與你：X麻煩的Javascript事件

這裏是我的問題，我定義了一組事件的一個錨：

theLink.setAttribute('onMouseOver','doSomething(this)'); **// works** 

theLink.addEventListener("mouseout", function(event){doSomethingElse(event)}, false); **// does not work** 

theLink.onmouseout = function(event){doSomethingElse(event)};  **// does not work**

只有當我定義事件在第一個例子的話，好像在第二或第三的定義是工作好。但是我不能使用這個定義，因爲我必須傳遞事件對象。

任何提示？我正在使用Firefox。

來源

2011-03-10 VJune

沒有Firefox的錯誤控制檯告訴你什麼有用嗎？在您使用鼠標懸停和第二和第三種情況第一種情況 – 2011-03-10 05:42:54

您使用鼠標移出.Are你假設兩個行爲相同 – GustyWind 2011-03-10 05:48:56

你缺少後'的_semicolon_ doSomethingElse（事件）'不知道是不是這個情況：P – 2011-03-10 06:03:53

這些所有這三個工作對我使用下面的代碼（在Firefox）：

HTML：

<a id="link1">Link 1</a> 
<a id="link2">Link 2</a> 
<a id="link3">Link 3</a>

JS：

var link1 = document.getElementById("link1"); 
var link2 = document.getElementById("link2"); 
var link3 = document.getElementById("link3"); 

window.doSomething = function(event) { 
    console.log(event); 
} 

link1.setAttribute('onMouseOver', 'doSomething(this)'); 

link2.addEventListener("mouseout", function(event) { 
    doSomething(event) 
}, false); 

link3.onmouseout = function(event) { 
    doSomething(event) 
};

這裏是它的工作一個的jsfiddle： http://jsfiddle.net/magicaj/qk6wU/

您還可以考慮使用像jQuery庫它處理跨瀏覽器不兼容問題不是由IE的某些版本支持addEventListener法，JS會是這個樣子：

$("#link1").mouseover(doSomething); 
$("#link2").mouseover(doSomething); 
$("#link3").mouseover(doSomething);

來源

2011-03-10 06:21:50

謝謝你，我的代碼有一些錯誤。我可以嘗試的jQuery ........我得到theLink爲「VAR theLink =的document.getElementById（theLinkID）」（較大的代碼庫，我不能改變的部分）......我該如何使用鼠標懸停函數的鏈接對象？有沒有辦法？或在.setAttribute方法....我可以停止事件傳播？感謝 – VJune 2011-03-10 08:46:44

如果你決定使用jQuery，你可以這樣做：'$（theLink）.mouseover（函數（）{//返回false停止傳播史}）;'。使用本地JavaScript事件處理方法可能會非常棘手，這裏有許多解決方案：http://www.quirksmode.org/blog/archives/2005/09/addevent_recodi.htmlhere很簡單：http://ejohn.org/projects/flexible-javascript-events /要停止事件搜索此頁面stopPropagation：http://www.quirksmode.org/js/events_order.html – 2011-03-10 09:04:54

優秀....很多謝謝:) – VJune 2011-03-10 14:35:34

跨browserness的答案包括

function doSomething(event) { 
    if(console && console.log) { 
     console.log(this); 
     console.log(event); 
    } 
    else { 
     alert(this === window ? 'WINDOW' : this.tagName); 
     alert(event); 
    } 
} 


var link1 = document.getElementById("link1"); 
var link2 = document.getElementById("link2"); 
var link3 = document.getElementById("link3"); 

// `this` within your handler will be `window` and not the link 
link1.setAttribute('onMouseOver', 'doSomething(event)'); 

// to attach event listeners you have to do a bit more work 
// (best to make a function rather than doing this each time 
if(document.addEventListener) { 
    // compliant browsers 
    link2.addEventListener('mouseover', doSomething, false); 
} else { 
    // internet explorer 
    link2.attachEvent('onmouseover', function() { 
     // grab the event object from the window 
     var e = window.event; 
     // normalise it a bit i.e. make it a bit more like a compliant browsers event object 
     e.target = e.srcElement; 
     e.preventDefault = function(){ e.returnValue = false }; 
     e.stopPropagation = function(){ e.cancelBubble = true }; 
     // and forward to your handler making sure that `this` is properly set 
     doSomething.call(this, e); 
    }); 
} 

link3.onclick = doSomething;

注意避免將您的處理程序包裝在不必要的匿名函數中，這很浪費，您在處理程序
中丟失了this，因此而不是

link3.onclick = function(event) { doSomething(event) };

剛剛分配處理器直接

link3.onclick = doSomething;

來源

2011-03-10 09:04:10 meouw

偉大的技巧.....謝謝你:) – VJune 2011-03-10 14:36:35

麻煩的Javascript事件

回答

相關問題