I'm trying to catch a click event on an element which changes its z-pos using appendchild on the mousedown event. The problem is that when you click an element when its not the front element then the click event doesn't fire. I know this is because it is removed from the DOM and then re-added but I'm not sure how I could fix it so that the click also fire when the element is moved to the front.
MyObject = {
init(parent, text) {
this.parent = parent;
this.text= text;
this.visual = document.createElement("div");
this.visual.setAttribute("class", "object");
this.visual.appendChild(document.createTextNode(text))
parent.appendChild(this.visual);;
this.visual.addEventListener("click", (e) => { this.onClicked(e); });
this.visual.addEventListener("mousedown", (e) => { this.onMouseDown (e); });
},
toTop() {
this.parent.appendChild(this.visual);
},
onClicked(e) {
alert(this.text + " was clicked");
e.stopPropagation();
},
onMouseDown(e) {
this.toTop();
// I'm also doing other things here
}
};
var parent = document.querySelector(".parent");
parent.addEventListener("click", (e) => { alert("parent clicked"); });
var createObj = function(text) {
var obj = Object.create(MyObject);
obj.init (parent, text);
};
createObj ("object 1");
createObj ("object 2");
createObj ("object 3");
createObj ("object 4");
.parent {
border: 1px solid red;
}
.object {
background: #0F0;
border: 1px solid black;
margin: 8px;
}
<div class="parent">
</div>
So in this example you always have to click the bottom element to get the alert while I would also like to get the alert when an other items is pressed.
edit: I'm testing in chrome (55.0.2883.87) and the code might not work in other browsers.
Related
I have a demo application where preventdefault/stopPropagation .Not sure where I am doing wrong .Using Jquery it is working fine.Follow the below steps to reproduce the bug
Run the application and click on button.
when I put jQuery code it works perfectly . it only show 'jquery:: 1' on console not showing
'jquery:: 2' as expected because we used e.preventDefault();e.stopPropagation();
jQuery(document).on('click', '.bclink[href*="bcid="]', function(e){
e.preventDefault();
e.stopPropagation();
console.log('jquery:: 1')
})
jQuery(document).on('click', '.clickvideo', function(e){
// detect .clickvideo-overlay parent to prevent spawning of additional w10 lightboxes
console.log('jquery:: 2')
});
but same code when I used in javascript and click button it console both JS:::1 and JS:::2.why prevent default not works
document.addEventListener('click', function(e) {
// loop parent nodes from the target to the delegation node
function handler(e){
e.preventDefault();
e.stopPropagation();
console.log("JS:::1")
}
for (var target = e.target; target && target != this; target = target.parentNode) {
if (target.matches('.bclink[href*="bcid="]')) {
handler.call(target, e);
break;
}
}
}, false)
document.addEventListener('click', function(e) {
// loop parent nodes from the target to the delegation node
function handler(e){
e.preventDefault();
e.stopPropagation();
console.log("JS::: 2")
}
for (var target = e.target; target && target != this; target = target.parentNode) {
if (target.matches('.clickvideo')) {
handler.call(target, e);
break;
}
}
}, false)
})
here is my code
https://jsbin.com/riwazorine/edit?html,css,js,output
Expected output : it only show "JS:::1" as I used preventdefault and stopPropagation()
In the JS, both event listeners are attached to the same element - the document. stopPropagation only stops event propagation to other elements (ancestors or descendants), but not to the same elements.
You need stopImmediatePropagation, which stops other event handlers on the same element from running.
document.addEventListener('click', function(e) {
// loop parent nodes from the target to the delegation node
function handler(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
console.log("JS:::1")
}
for (var target = e.target; target && target != this; target = target.parentNode) {
if (target.matches('.bclink[href*="bcid="]')) {
handler.call(target, e);
break;
}
}
}, false)
document.addEventListener('click', function(e) {
// loop parent nodes from the target to the delegation node
function handler(e) {
e.preventDefault();
e.stopPropagation();
console.log("JS::: 2")
}
for (var target = e.target; target && target != this; target = target.parentNode) {
if (target.matches('.clickvideo')) {
handler.call(target, e);
break;
}
}
}, false)
.bcthumbnail {
width: 100px;
height: 100px;
border: 1px solid
}
<div class="bcthumbnail clickvideo bcimgadded" data-bcid="6086922094001"><button class="vjs-big-play-button"></button>button</div>
Also, rather than your for loo, you can use .closest instead, it's a whole lot cleaner.
document.addEventListener('click', (e) => {
if (e.target.closest('.bclink[href*="bcid="]')) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
console.log("JS:::1")
}
})
document.addEventListener('click', function(e) {
if (e.target.closest('.clickvideo')) {
console.log("JS::: 2")
}
})
.bcthumbnail {
width: 100px;
height: 100px;
border: 1px solid
}
<div class="bcthumbnail clickvideo bcimgadded" data-bcid="6086922094001"><button class="vjs-big-play-button"></button>button</div>
I have some dynamically created divs . And when the user clicks on the screen I want to check if it was on one of the dynamically created divs.But it doesnt seem to work. I already have a window.addeventListener but that too is not working for the dynamically created divs.
var divk = document.createElement("div");
divk.className="divk";
window.addEventListener('click', function(e){
if (document.getElementById('outside_click_purpose').contains(e.target)){
currentItem = e.target;
if (currentItem.classList.contains("divk")) {
alert("contains !!!");
}
}
});
I think you need to use event delegation then use matches
Notice how we use
e.target.matches('.dynamic')
To check for the presence of our class, we can use any valid css selector
For example, if we wanted to ensure it was a div:
e.target.matches('div.dynamic');
See the demonstration below:
// Add some dynamic divs
const getDiv = (content) => {
const div = document.createElement('div');
div.className = 'dynamic';
div.innerHTML = content;
return div;
};
const setMessage = (msg) => document.querySelector('.clicked').innerText = msg;
document.addEventListener('DOMContentLoaded', () => {
const container = document.querySelector('#container');
for(let i = 0; i< 10; i++) {
container.appendChild(getDiv(`Dynamic ${i}`));
}
});
// Use event delegation
document.addEventListener('click', (e) => {
if(e.target.matches('.dynamic')) {
setMessage(`Clicked a dynamic div - text ${e.target.innerText}`);
}
else {
setMessage('Click was not on dynamic');
}
});
.clicked {
height: 20px;
border: 1px solid red;
}
.manual {
background-color: blue;
color: white;
}
<div class="clicked"></div>
<div class="manual">Manual</div>
<div class="manual">Manual</div>
<div id="container"></div>
I have a javascript that opens up a hidden div:
<script>
function dropdown()
{ document.getElementById("login_dropdown").style.display="block"; }
</script>
The html is:
<div onclick="dropdown()">
<div id="login_dropdown">STUFF</div>
</div>
The CSS is:
<style>
#login_dropdown {
width: 150px;
display:none;
}</style>
Using javascript alone, how can I hide this div when I click anywhere else on the page, excluding the opened DIV itself.
Something like this with vanilljs
document.addEventListener('click', function(event){
const yourContainer = document.querySelector('....');
if(!yourContainer.contains(event.target)) {
//hide things classes.. yourContainer.classList.add('hidden');
}
});
You could do this
var elem = document.getElementById("login_dropdown");
(document.body || document.documentElement).addEventListener('click', function (event) {
// If the element on which the click event occurs is not the dropdown, then hide it
if (event.target !== elem)
elem.style.display="none";
}, false);
function closest(e, t){
return !e? false : e === t ? true : closest(e.parentNode, t);
}
container = document.getElementById("popup");
open = document.getElementById("open");
open.addEventListener("click", function(e) {
container.style.display = "block";
open.disabled = true;
e.stopPropagation();
});
document.body.addEventListener("click", function(e) {
if (!closest(e.target, container)) {
container.style.display = "none";
open.disabled = false;
}
});
#popup {
border: 1px solid #ccc;
padding: 5px;
display: none;
width: 200px;
}
<div id="container">
<button id="open">open</button>
<div id="popup">PopUp</div>
</div>
Something like this:
$("document").mouseup(function(e)
{
var subject = $("#login_dropdown");
if(e.target.id != subject.attr('id'))
{
subject.css('display', 'none');
}
});
works like this. When you click anywhere on the page, the handler fires and compares the ID of the open tab vs the id of the document (which there is none) - so it closes the tab. However, if you click the tab, the handler fires, checks the ID, sees the target is the same and fails the test (thus not closing the tab).
How can I remove an attribute of an element on click outside or on another div of same type? Here's my code:
HTML:
<div id="container">
<div data-something></div>
<div data-something></div>
</div>
JavaScript:
var elements = document.querySelectorAll("[data-something]");
Array.prototype.forEach.call(elements, function(element) {
// Adding
element.onclick = function() {
this.setAttribute("data-adding", "");
};
// Removing -- Example
element.onclickoutside = function() {
this.removeAttribute("data-adding");
};
});
I would probably use a click handler on the document, and then remove the attribute from any element that had it that wasn't in the bubbling path.
document.addEventListener("click", function(e) {
Array.prototype.forEach.call(document.querySelectorAll("*[data-adding][data-something]"), function(element) {
var node, found = false;
for (node = e.target; !found && node; node = node.parentNode) {
if (node === element) {
found = true;
}
}
if (!found) {
element.removeAttribute("data-adding");
}
});
}, false);
...or something along those lines.
Live Example:
document.addEventListener("click", function(e) {
Array.prototype.forEach.call(document.querySelectorAll("*[data-adding]"), function(element) {
var node, found = false;
for (node = e.target; !found && node; node = node.parentNode) {
if (node === element) {
found = true;
}
}
if (!found) {
element.removeAttribute("data-adding");
}
});
}, false);
*[data-adding] {
color: red;
}
<div data-adding data-something>One</div>
<div data-adding data-something>Two</div>
You can use Node.contains() inside a global click event handler to check if a click is outside an element, and handle the event appropriately:
box = document.getElementById('box');
lastEvent = document.getElementById('event');
box.addEventListener('click', function(event) {
// click inside box
// (do stuff here...)
lastEvent.textContent = 'Inside';
});
window.addEventListener('click', function(event) {
if (!box.contains(event.target)) {
// click outside box
// (do stuff here...)
lastEvent.textContent = 'Outside';
}
});
#box {
width: 200px;
height: 50px;
background-color: #ffaaaa;
}
<div id="box">Click inside or outside me</div>
<div>Last event: <span id="event">(none)</span>
</div>
I'm using html5's drag and drop functionalities to rearrange dom elements on screen - I attach css behavior to the various states of dragging and dropping when I do this, but the problem I'm experiencing is that the hover state remains even after I've dragged, dropped, and moused out of a DOM element. Here's my code:
JAVASCRIPT:
function addDragListeners(){
$('.segmentListItem').each(function(index){
$(this)[0].addEventListener('dragstart',handleDragStart,false); //rollover for current
$(this)[0].addEventListener('drop',handleDrop,false); //drops dragged element
$(this)[0].addEventListener('dragover',handleDragOver,false); //allows us to drop
$(this)[0].addEventListener('dragenter',handleDragEnter,false); //rollover for target
$(this)[0].addEventListener('dragleave',handleDragLeave,false); //sets dragged item back to normal
$(this)[0].addEventListener('dragend',handleDragEnd,false); //sets all back to normal
});
}
function handleDragEnter(e) {
// this / e.target is the current hover target.
this.classList.add('over');
}
function handleDragLeave(e) {
this.classList.remove('over'); // this / e.target is previous target element.
}
function handleDragEnd(e){
$('.segmentListItem').removeClass('over'); //removes the over class on all elements
}
function handleDragStart(e){
draggedItem = this;
e.dataTransfer.effectAllowed = 'move';
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault(); // Necessary. Allows us to drop.
}
e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object.
return false;
}
function handleDrop(e){
if (e.stopPropagation) {
e.stopPropagation();
}
if (draggedItem != this) { //MH - swap if we're not dragging the item onto itself
var draggedIndex = $('.segmentListItem').index($(draggedItem));
var targetIndex = $('.segmentListItem').index($(this));
if (draggedIndex > targetIndex){
$(draggedItem).insertBefore($(this));
} else {
$(draggedItem).insertAfter($(this));
}
}
return false;
}
CSS:
a { border-radius: 10px; }
a:hover { background: #ccc; }
.segmentListItem { text-align:center; width: 50px; margin-right: 5px; font-size: 16px; display:inline-block; cursor:move; padding:10px; background: #fff; user-select: none; }
.segmentListItem.over { background: #000; color: #fff; }
Status (six years later)
According to https://bugs.webkit.org/show_bug.cgi?id=134555 this used to be a bug. However, it must have been fixed in the meantime, as it cannot be reproduce anymore in modern browsers. The only browser where I could still replicate it was IE11.
Working fix
You can replace the CSS :hover with a .hover class toggled from JS, in order to better control the hover state:
document.querySelectorAll('.segmentListItem a').forEach(function (item) {
item.addEventListener('mouseenter', function () {
this.classList.add('hover');
});
item.addEventListener('mouseleave', function () {
this.classList.remove('hover');
});
});
Code snippet below:
function addDragListeners() {
$(".segmentListItem").each(function(index) {
$(this)[0].addEventListener("dragstart", handleDragStart, false); //rollover for current
$(this)[0].addEventListener("drop", handleDrop, false); //drops dragged element
$(this)[0].addEventListener("dragover", handleDragOver, false); //allows us to drop
$(this)[0].addEventListener("dragenter", handleDragEnter, false); //rollover for target
$(this)[0].addEventListener("dragleave", handleDragLeave, false); //sets dragged item back to normal
$(this)[0].addEventListener("dragend", handleDragEnd, false); //sets all back to normal
});
}
function handleDragEnter(e) {
// this / e.target is the current hover target.
this.classList.add("over");
}
function handleDragLeave(e) {
this.classList.remove("over"); // this / e.target is previous target element.
}
function handleDragEnd(e) {
e.preventDefault();
$(".segmentListItem").removeClass("over"); //removes the over class on all elements
}
function handleDragStart(e) {
draggedItem = this;
e.dataTransfer.effectAllowed = "move";
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault(); // Necessary. Allows us to drop.
}
e.dataTransfer.dropEffect = "move"; // See the section on the DataTransfer object.
return false;
}
function handleDrop(e) {
if (e.stopPropagation) e.stopPropagation();
if (draggedItem != this) {
//MH - swap if we're not dragging the item onto itself
var draggedIndex = $(".segmentListItem").index($(draggedItem));
var targetIndex = $(".segmentListItem").index($(this));
if (draggedIndex > targetIndex) {
$(draggedItem).insertBefore($(this));
} else {
$(draggedItem).insertAfter($(this));
}
}
return false;
}
// JS fix starts here:
document.querySelectorAll('.segmentListItem a').forEach(function(item, idx) {
item.addEventListener('mouseenter', function() {
this.classList.add('hover');
});
item.addEventListener('mouseleave', function() {
this.classList.remove('hover');
});
});
// and ends here. Comment these lines, and uncomment the `a:hover` rule in CSS in order to see the initial code
addDragListeners();
a {
border-radius: 10px;
}
/* a:hover {
background: #ccc;
} */
.segmentListItem {
text-align: center;
width: 50px;
margin-right: 5px;
font-size: 16px;
display: inline-block;
cursor: move;
padding: 10px;
background: #fff;
user-select: none;
}
.segmentListItem.over {
background: #000;
color: #fff;
}
.hover {
background: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul>
<li class="segmentListItem">
test1
</li>
<li class="segmentListItem">
test2
</li>
<li class="segmentListItem">
test3
</li>
</ul>