Question

我正在为＃34;欢迎对话＆＃34;。

这样做

如果您点击特定<div>并将您转到其他网页或关闭欢迎<div>，此功能会收听。

但我认为我无法使其适用于＆＃34;关闭＆＃34;功能。

HTML头中的我的脚本：

function hideWell() {
    if (("welSolu").on('click hover')) {
        location.href = "http://www.cnn.com";
    }
    document.getElementById("welScreen").style.visibility = "hidden";
    document.getElementById("welScreen").style.display = "none";
    document.querySelector("html").style.overflow = "visible";
}

HTML正文中的<div>：

<div id="welScreen" onmousedown="hideWell()">
    <div id="welSolu">to go another page click here</div>
</div>

Answer 1

代码中的问题出现在if子句中--JQuery中的on()方法使用回调机制 - 它不是你调用的东西＆＃34;检查状态＆＃34;而不是你用它来注册状态变化通知＆＃34;。

这样的事情是预期的行为：

$("#welSolu").on('click hover', function() {
    location.href = "http://www.cnn.com";
});

（虽然当有人悬停在页面中的元素上时更改当前页面确实具有破坏性，但请不要这样做。）

此代码不应该在hideWell()函数内部 - 它应该作为页面的就绪状态处理的一部分运行 - 即它应该在＆＃34;文档准备就绪时立即运行＃34;但不是在那之前。 JQuery有一个设施，它看起来像这样：

$(document).ready(function(){
    $("#welSolu").on('click hover', function() {
        location.href = "http://www.cnn.com";
    });
});

该功能的另一部分可以保持原样，并且当用户＆＃34; mouses down＆＃34;在没有由JQuery事件处理程序处理的div的部分 - 虽然改变它以使用JQuery事件处理可能是一个好主意，只是为了使所有代码使用相同的机制：它更容易理解并保持这种方式。

所以完整的替换代码可能如下所示：

HEAD中的脚本：

$(document).ready(function() {
    $("#welSolu").on('click hover', function() {
        location.href = "http://www.cnn.com";
    });
    $("#welScreen").on('click', function() {
        document.getElementById("welScreen").style.visibility = "hidden";
        document.getElementById("welScreen").style.display = "none";
        document.querySelector("html").style.overflow = "visible";
    });
}

Answer 2

无需将函数附加到onmousedown事件。只需为您想要的任何内容设置事件监听器。我不完全确定你什么时候想要隐藏欢迎div，但这样的事情应该有效：

$('#welSolu').click(function() {
    location.href = "http://www.cnn.com";
});

$('#welScreen').click(function() {
    this.hide();
});

HTML：

<div id="welScreen">
    <div id="welSolu">to go another page click here</div>
</div>

Answer 3

我建议你使用两个不同的功能，因为一个功能做一件事是一个好习惯。事件你的代码有几个错误，没有jquery你可以做这样的事情：

＆＃13;

function doRedirect(e) {
    // Prevent event propagation to the outer div
    e.stopPropagation();
    // Do your redirect
    console.info("redirect");
}

function hideWell(e) {
    // Do the hiding thing
    console.info("hideWell");
}

＆＃13;

#welScreen {
  padding: 15px;
  background: gray;
}

#welSolu {
  background: green;
}

＆＃13;

<div id="welScreen" onmousedown="hideWell(event)">
    <div id="welSolu" onmousedown="doRedirect(event)">to go another page click here</div>
</div>

＆＃13;

如何制作特定的点击触发链接否则做其他事情？

3 个答案: