Question

我的问题是，当其他事件使用相同的代码时，为什么click事件不起作用？请考虑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";
}

滚动链接“关于”按预期显示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的新手，我必须遗漏一些东西。

Answer 1

对于Square 2使用“click”事件

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事件没有效果。没有约束力。

为什么不Javascript DOM 2“点击”事件工作

1 个答案: