0

我的问题是，当其他事件使用相同的代码工作时，为什么点击事件不起作用？考虑以下来自http://www.pricelearman.com/__dev的代码示例（2 个下划线）

对于使用“点击”事件的 Square 2

function showWorkPane() {
    var _workID = document.getElementById("workID");
    _workID.addEventListener("click", showWorkPaneHandler, false);
}

function showWorkPaneHandler(e) {
    var _workPane = document.getElementById("workPane");
    e.preventDefault();
   _workPane.style.display = "block";   
}

单击链接“工作”不会显示工作窗格。

对于使用“鼠标悬停”事件的 Square 3

function showAboutPane() {
    var aboutID = document.getElementById("aboutID");
    aboutID.addEventListener("mouseover", showAboutPaneHandler, false);
}

function showAboutPaneHandler(e) {
    e.preventDefault();
    var v = document.getElementById("aboutPane");
    v.style.display = "block";
}

Rolling-Over 链接“ABOUT”按预期显示 aboutPane 悬停效果

对于使用“mousedown”事件的 Square 4

function showConnectPane() {
    var connectID = document.getElementById("connectID");
    connectID.addEventListener("mousedown", showConnectPaneHandler, false);
}

function showConnectPaneHandler(e) {
    e.preventDefault();
    var v = document.getElementById("connectPane");
    v.style.display = "block";
}

在链接“CONNECT”上按住鼠标会按预期显示 connectPane

关于点击事件，我错过了什么。对我来说，它不会遵循与其他鼠标事件相同的模式，这对我来说是违反直觉的。

我试图通过使用 e.preventDefault(); 来排除链接默认操作的干扰；

我知道单击事件是一系列简单事件：mousedown、mouseup、click。

有什么东西阻碍了这个序列吗？

完整代码可在http://www.pricelearman.com/__dev（2个下划线）查看。代码可能不是最佳的，但它在功能上是正确的——完成绑定并调用函数等——否则上面的代码根本无法工作。

感谢您的时间和专业知识。这对我来说是一个令人烦恼的问题。它看起来如此基本和简单。我是 javascript 新手，我一定遗漏了一些东西。

4

1 回答 1

1

对于使用“点击”事件的 Square 2

function showWorkPane() {
    var _workID = document.getElementById("workID");
    _workID.addEventListener("click", showWorkPaneHandler, false);
}

function showWorkPaneHandler(e) {
    var _workPane = document.getElementById("workPane");
    e.preventDefault();
   _workPane.style.display = "block";   
}

单击链接“工作”不会显示工作窗格。

那么我目前可以在http://www.pricelearman.com/__dev/_js/main.js找到的是

// Show work navigation
function showWorkPane() {
    var workID = document.getElementById("workID");
    workID.addEventListener("mouseover", showWorkPaneHandler, false);
//                           ^^^^^^^^^
}

function showWorkPaneHandler(e) {
    e.preventDefault();
    var v = document.getElementById("workPane");
    v.style.display = "block";
}

对我来说看起来很明显为什么click事件没有效果。没有任何约束。

于 2013-07-19T01:38:52.210 回答