G Flame G Flame - 2 months ago 7
HTML Question

How to make specific click trigger link else do something else?

I am doing this for a "welcome dialog".

This function listens if you click on specific

<div>
and sends you to another web page or closes the welcome
<div>
.

But I think I couldn't make it work for the "close" functionality.

My script in the HTML head:

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";
}


My ''s in the HTML body:

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

Answer

I suggest you to use two different functions for that, because it is a good practice that one function does one thing. Event your code has several mistakes, without jquery you can do your thing like this:

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");
}
#welScreen {
  padding: 15px;
  background: gray;
}

#welSolu {
  background: green;
}
<div id="welScreen" onmousedown="hideWell(event)">
    <div id="welSolu" onmousedown="doRedirect(event)">to go another page click here</div>
</div>