Binding event to all elements except specific element and all its contents.

Binding event to all elements except specific element and all its contents.

by dima_k

HTML

<div id="menu">
    <h2>Here is the area that stops touch/click events</h2>
</div>
<div id="content">
    <h1> Content of the page</h1>
</div>

CSS

div {
    border: 1px solid black;
    height: 600px;
    padding: 10px;
}
#menu {
    float: left;
    width: 15%;
}

#content {
    height: 600px;
    border: 1px solid black;
    display: inline-block;
    width: 72%;
}

JavaScript

//step 1 - click event to body
function clickOnBody(event){
    // you can close here the menu
    alert('clicked everywhere except the menu area');
}
document.body.addEventListener('mousedown', clickOnBody, false);
document.body.addEventListener('touchstart', clickOnBody, false);

//step 2 = pervent clicks/touches from menu to trigger body event

function clickOnMenu(event){
    event.stopPropagation();
}
var menu = document.getElementById('menu');
menu.addEventListener('mousedown', clickOnMenu, false);
menu.addEventListener('touchstart', clickOnMenu, false);