Firefox 上的事件对象

Question

抱歉，这似乎很讨人喜欢...这就是为什么 firefox 没有像 Chrome 一样更改其代码以完全符合 Event 对象的原因。我已经完成了作业，尝试了 StackOverflow 上给出的几种解决方案，但似乎没有任何效果。我有这个代码：

function xpto(e) {
if( !e ) e = window.event;
  var x = e.target||e.srcElement;
alert(x);
    ........
}

调用如下：

<svg id="graph-svg" onclick="xpto(event)" style="outline: none;" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

是的...这是一个 svg 元素，我试图点击它。我没有放完整的代码，因为它与问题无关。底线，

alert(x)

在 Firefox 上总是以未定义的形式发出警报，并且在 Chrome 上工作就像一个魅力。我可以在 Firefox 上抓取事件，但“x”总是未定义。

在 DOM 描述的 firefox 中，支持 Event 和 SVG。为了向后兼容，甚至使用“target”和“srcElement”属性定义了事件。

我在 Ubuntu 上使用 Firefox 20...有人可以帮忙吗？

Answer 1

在 d'alar'cop 回复后，我查看了代码，发现在 firefox 中有效的参数不是“event”或“Event”而是“evt”...... Firebug 中的控制台显示了这一点：

    function onclick(evt) { xpto(event) }

因此，我意识到处理程序是用“event”而不是原始参数“evt”调用的。然后当它落入处理程序时，“事件”将变为“空”......未定义。

Answer 2

很多时候我看到事件处理程序内联在 HTML 代码中，而不是依赖更强大的 event listeners。

改为使用onclick 为什么不将侦听器附加到SVG 元素？你可以试试这个：

var addListener = function (element, event, callback) {
    // We define a cross-browser function
    if (window.addEventListener) {
        // Mozilla/Webkit/Opera
        element.addEventListener(event, callback, false);
    } else {
        // IE
        element.attachEvent('on' + event, callback);
    }
};

// Then we attach the event listener to the SVG element
addListener(document.getElementById('graph-svg'), 'click', function (evt) {
    // Here you can manage the fired event
    alert(evt);
});

或者，使用 jQuery：

$('#graph-svg').on('click', function(evt){
    alert(evt);
});

您可以使用此 fiddle 进行尝试（在 Ubuntu 12.10 上使用 FF 20.0 和 Chrome 26 进行测试）。

当然，内联处理程序并不总是邪恶的，但很多时候它们不是解决方案，恕我直言。