Lets say we have a like this structure:
document.querySelector(".container").addEventListener("click", e => {
e.stopImmediatePropagation();
}
<a href="page2.html" class="container">
<div class="preventGoToLinkWhenClick">
button for open video modal
</div>
</a>
When I click on the div inside, it should not go to the link. Is this possible? I have tried stopImmediatePropagation() but does not works.
But should work <a> element when click outside the div
Use an event listener to prevent default action if the clicked element contains class preventGoToLinkWhenClick (or any criterium you define), otherwise just return
document.addEventListener("click", evt => {
if (evt.target.classList.contains("preventGoToLinkWhenClick")) {
evt.preventDefault();
}
return;
});
<a href=//www.google.com" class="container">
<div class="preventGoToLinkWhenClick">
button for open video modal
</div>
[click to open]
</a>
Related
I have multiple modals with different id's.
<div id="#Modal" tabindex="-1" class= active" style="left: Opx;" role="dialog" >
<div id="#Modal-text' tabindex="0">
<div class="container">
<div class= close-btn">
<a class="closer noprint href=" javascript:void(0) aria-label="Close dialog" tabindex="0"></a>
</div>
</div>
<div class= content">..modal content goes here</div>
<div class="focus-guard" tabindex="0"></div>
</div>
<div id="#Modal-anothertext' tabindex="0"></div>
<div id="#Modal-sample' tabindex="0"></div>
</div>
The jquery function add a focus guard div and add an event listener to it whenever a tab or keyboard navigation, through it, it will go again to the close button:
"use strict"
jquery(document).ready(function ($) {
// Check if modal exists
if ($(" [id+='Modal-']").length {
// Check id's if containstring of 'Modal-' and check if modal has child with #focus-guard
if ($("[id*='Modal-']").find("focus-guard").length === 0) {
console.log("does not exist");
const focusGuard = document.createElement("div");
focusGuard.setAttribute("class", "focus-guard");
focusGuard.setAttribute("tabindex", "0");
// Add focus guard to parent
$("[id*='Modal-']").append(focusGuard);
// The closer button is being added in the DOM upon clicking modal, that's why I used DOMNodeInserted
$(document).bind("DOMNodeInserted", function (e) {
if (e.target.className="container") {
const close = document.querySelector(".closer");
console.log(close);
focusGuard.addEventListener("focus", () => {
close.focus();
});
}
});
}
});
}
Have tried also some possible selectors and isolating a single modal.
Unfortunately, the eventlistener on focus guard div does not trigger and I cannot target speciffically the "closer noprint" class.
I know it's not right to have a selector like an array("[id=Modal-]"*) to refer to the parent element of the modal but since it's multiple, not sure if this will be the right thing to do. Might there be a simple solution for this one.
Also stuck with a function that focuses on the last item clicked after dismissing the modal.
<button onClick={onClickParent}>
<div className={"iconDiv"}>
<div className={"iconNameDiv"}>
</button>
I have something like this structure.
When I click the button, It will change the color of the button
However, when I click the inside div, this onclick funtion didn't work.
How to prevent onclick inside div ? only parent
Generally whatever is inside a button tag should be used for the button click, so I would go for a div tag which can be used for alignment of children. Below is the code for preventing child element triggering clicks, just check the class and ensure that its the same as class of the parent div.
function test(event) {
if(event.target.className === 'test') {
console.log('execute click code');
}
}
.test {
padding: 50px;
}
<div onClick="test(event)" class="test">
<div className="test1"> asdfasdf</div>
<div className="test2"> asdfasdf</div>
</div>
I am using this script to open a drop down menu and then close it when anything else but the trigger is clicked. Now I am trying to add a second drop down to another area on the page and repeat the script but it is breaking.
For instance, I click button A (Gravatar), and drop down A opens.
However when I add the second script and click button B (category) to open drop down B, down down A stays open.
Also adding the second script breaks the drop down close function of the first script.
Here is the script:
<script>
function openAccount(event) {
event.stopPropagation();
document.getElementById("gravatar").classList.toggle("open");
}
window.onclick = function(event) {
document.getElementById("gravatar").classList.remove("open");
}
</script>
<script>
function openCategory(event) {
event.stopPropagation();
document.getElementById("category").classList.toggle("open");
}
window.onclick = function(event) {
document.getElementById("gravatar").classList.remove("open");
}
</script>
<li class="gravatar">
<a href="#" class="dropbtn" onclick="openAccount(event)">
<img src="<?php echo $gravatar; ?>" alt="" />
<span class="fa fa-icon fa-caret-down"></span>
</a>
<ul class="dropdown" id="gravatar">
<li class="header">
<?php echo $user['email']; ?>
</li>
</ul>
</li>
<div class="category">
Properties<span class="fa fa-icon fa-caret-down"></span>
<div id="category">Test</div>
</div>
Goals:
Multiple drop down menus on different parts of the page.
On click opens drop down.
Click on anywhere else on the page closes the drop down.
On click also closes any previously opened menu.
I'd do something really simple like putting a data* attribute on the element that's clicked on that contains the ID of the element to show or hide, e.g.
// Toggle hidden class on/off
function toggleVis(event) {
// Stop click on element bubbling (to body)
event.stopPropagation();
// Get target element
var el = document.getElementById(this.dataset.id);
// If non-target elements are visible, hide them
hideAll(el);
// Toggle target
el.classList.toggle('hidden');
}
// Hide all, excluding passed element
function hideAll(el) {
Array.from(document.querySelectorAll('ul:not(.hidden)')).forEach(function(node){
if (el != node) node.classList.add('hidden');
});
}
// Attach listeners
window.onload = function() {
// Add to linkLike spans
Array.from(document.querySelectorAll('.linkLike')).forEach(function(node) {
node.addEventListener('click', toggleVis, false);
});
// Add hideAll listener to wndow
window.addEventListener('click', hideAll, false);
// Run hideAll
hideAll();
}
/* style span like link */
.linkLike {
text-decoration: underline;
cursor: pointer;
}
/* class to hide element */
.hidden {
visibility: hidden;
}
<ul id="a"><li>A</ul>
<ul id="b"><li>B</ul>
<ul id="c"><li>C</ul>
<ul id="d"><li>D</ul>
<div><span class="linkLike" data-id="a">Toggle A</span></div>
<div><span class="linkLike" data-id="b">Toggle B</span></div>
<div><span class="linkLike" data-id="c">Toggle C</span></div>
<div><span class="linkLike" data-id="d">Toggle D</span></div>
Of course there are other ways to do the association, but ID is simple, explicit and doesn't depend on document layout or formatting.
I have a series of links on my page, each link has a unique id: library_vid_link-UNIQUE_ID. When clicked, I want to show a popup which shows information unique to that link.
For each link, I have a hidden popup, which, when clicked, the popup is displayed. The popup also has a unique id: less_preview_popup-UNIQUE_ID (the unique id for the link and popup both match).
Here is a sample of my html code:
<a href="#" class="library_vid_link" id="library_vid_link-801">CLICK HERE FOR MORE INFO
</a>
<div class="lesson_preview_popup" id="lesson_preview_popup-801">
THIS IS THE POPUP
</div>
<a href="#" class="library_vid_link" id="library_vid_link-802">CLICK HERE FOR MORE INFO
</a>
<div class="lesson_preview_popup" id="lesson_preview_popup-802">
THIS IS THE POPUP 2
</div>
Here is the jquery i'm currently using:
jQuery('.library_vid_link').click(function( event ) {
event.preventDefault();
$('.lesson_preview_popup').css('top', '25%');
$('body').addClass('no-scroll');
});
The issue I'm having is that when I click on a link, ALL the popups show, not just the one that relates to the link clicked. Is there a way to target the popup that belongs to the link clicked?
Use the data-attribute:
<a data-popup="lesson_preview_popup_801" ....
And
$("#"+$(this).data("popup")).show().css('top', '25%');
Using $(this).next() instead, assumes that the div to show is the next sibling of the link
Change this:
$('.lesson_preview_popup').css('top', '25%');
into this:
$(this).next().css('top', '25%');
Alternatively, save the ID (e.g. 801) in a new attribute, like this:
<a data-id="801" ...
Then, call the popup like this:
jQuery('.library_vid_link').click(function( event ) {
event.preventDefault();
var thisId = $(this).attr("data-id"); //get "801"
$('#lesson_preview_popup-' + thisId).css('top', '25%'); //construct the ID and call the popup by its ID
$('body').addClass('no-scroll');
});
Jquery .next() select next sibling of element. Use it like bottom example
$('.library_vid_link').click(function( event ) {
event.preventDefault();
$(this).next().show().css('top', '25%');
$('body').addClass('no-scroll');
});
$('.library_vid_link').click(function( event ) {
//event.preventDefault();
$(this).next().show().css('top', '25%');
//$('body').addClass('no-scroll');
});
.lesson_preview_popup {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="library_vid_link" id="library_vid_link-801">CLICK HERE FOR MORE INFO
</a>
<div class="lesson_preview_popup" id="lesson_preview_popup-801">
THIS IS THE POPUP
</div>
<a href="#" class="library_vid_link" id="library_vid_link-802">CLICK HERE FOR MORE INFO
</a>
<div class="lesson_preview_popup" id="lesson_preview_popup-802">
THIS IS THE POPUP 2
</div>
I have a modal which when open gets this jquery statement:
$(".modal-inner").on("click", function(e) {
e.stopPropagation();
});
The trouble is, nested within this modal body, I have a child element that I'm using Clipboard.js on so a user may copy text. HTML as follows:
<div class="modal-inner"> <!-- stopPropagation applied to parent -->
<div class="modal-close" for="modal-1"></div>
<h1>Let's Connect</h1>
<i class="e"></i>
<p>You can reach me at:</p>
<p class="em">
<input id="emailToCopy" value="this.email#gmail.com"/>
<!-- This grandchild's functionality is now disabled -->
<button class="clip-btn" id="thisClip" data-clipboard-action="copy" data-clipboard-target="#emailToCopy" value="clipBtn">copy email</button>
</p>
</div>
The stopPropagation on .modal-inner keeps the modal from closing if the user clicks inside. This in turn disables my button which executes a script when clicked. I need this button to bypass the stopPropagation from the parent element.
You could just check if the button is clicked, and stop propagation conditionally
$(".modal-inner").on("click", function(e) {
if ( $(e.target).closest('#thisClip').length > 0 ) { // this is the button
e.stopPropagation();
}
});
This is probably not elegant but I believe will work:
$(".modal-inner").on("click", function(e) {
if (!$("button").is(":hover")) e.stopPropagation();
});
You may try testing the event target id and tagName:
$('.modal-inner').on("click", function(e) {
//
// you may also use:
// if ( $(e.target).is('#thisClip') ) {
//
if (e.target.id = 'thisClip' && e.target.tagName == 'BUTTON') {
e.stopPropagation();
console.log('You clicked the button: stop propagation');
} else {
console.log('You did not click the button');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-inner"> <!-- stopPropagation applied to parent -->
<div class="modal-close" for="modal-1"></div>
<h1>Let's Connect</h1>
<i class="e"></i>
<p>You can reach me at:</p>
<p class="em">
<input id="emailToCopy" value="this.email#gmail.com"/>
<!-- This grandchild's functionality is now disabled -->
<button class="clip-btn" id="thisClip" data-clipboard-action="copy" data-clipboard-target="#emailToCopy" value="clipBtn">copy email</button>
</p>
</div>