I have an a in a div and want to change the window location on click of div.
<div class="div-class">
</div>
$(document).on("click", ".div-class:not(.a-class, .a-class-2)", function() {
window.location = "/somewhere-else";
}
When clicking on either a, a new tab opens and the current window changes location. I want it to be that if you click on any a it will open a new tab, if you click on the containing div it will change window location.
To achieve this you can hook to the a elements directly and call stopPropagation() on the event passed to the handler. This will stop the event bubbling to the div and will ensure only the new tab is opened.
Similarly, you can hook to the click event of the div element to call window.location.assign() to change the page URL. Try this:
$(document).on("click", ".a-class, .a-class-2", function(e) {
e.stopPropagation();
console.log('a clicked');
}).on('click', '.div-class', function() {
console.log('div clicked');
// location.assign("/somewhere-else"); // commented out to stop breaking the snippet
});
/* this is only to make the hit areas more obvious in the snippet */
a { border: 1px solid #C00; }
div { border: 1px solid #0C0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-class">
a-class
a-class-2
</div>
Rory's answer works, but I don't think it needs two handlers or to call stopPropagation (which can be harmful). You can filter on the event target using jQuery.is
$(document).on("click", ".div-class", function(event) {
if (!$(event.target).is(".a-class, .a-class-2")) {
console.log("going /somewhere-else");
}
// You could also do
if( $(event.target).is(".div-class") ) {
console.log("going /somewhere-else v2");
}
});
a { background-color: #eee; }
div { border: 1px solid #0C0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-class">
link 1
link 2
</div>
Related
I have this code which makes a div to display as none when anywhere outside the div is clicked. But my problem is I also want the link which makes the div to display block to also close the div if the div is displayed as block so I ran this code:
function show_div(x){
var box = document.getElementById(x);
if(box.style.display=='block'){
box.style.display='none';
} else {
box.style.display='block';
window.addEventListener('mouseup', function(event){
if(event.target != box && event.target.parentNode != box){
box.style.display='none';
}
});
}
}
But the link does not close the div. if I run it like this:
function show_div(x){
var box = document.getElementById(x);
if(box.style.display=='block'){
box.style.display='none';
} else {
box.style.display='block';
}
}
The link opens and closes the div, But I also want a click anywhere outside the div to close the div also. Please do anyone have a better Idea on how I can achieve this? Here is my HTML:
<a onclick="show_div('divd')" href="javascript:;">click</a>
<div id="divd">this is the div</div>
As Portal_Zii said, you'll probably need a wrapper/container for your div to hide it, but this example should give you a basic idea.
$(document).ready(function() {
var $div = $("#divd");
$("a").on("click", function() {
$div.toggle(); // this is to toggle div visibilty
});
$div.on("click", function(e) {
// prevent div from closing when clicking inside
e.preventDefault();
return false;
});
$div.parent().on("click", function() {
// hide div when user clicks inside div's parent element
$div.hide();
});
});
.container {
background: red;
height: 100px;
padding: 20px;
}
#divd {
background: blue;
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
click
<div class="container">
<div id="divd">this is the div</div>
</div>
I have 2 divs with a js click event. One div is located in the other one.
But I dont want the outer div's click event to be triggered if I click the inner one. How can I prevent that?
By default, event handling starts at the lowest level of the DOM where you have defined a handler to handle the target event. Assuming you have defined event listeners higher in the parent chain to handle the same event, you will need to stop the propagation of the event if you do not wish for the event to be handled beyond the layer you intend for it to be handled in:
e.stopPropagation();
See what happens when you remove that line in the example below:
document.querySelector('.inner').addEventListener('click', function(e) {
alert('inner div clicked!');
e.stopPropagation();
});
document.querySelector('.outer').addEventListener('click', function() {
alert('outer div clicked!');
});
.outer {
width: 200px;
height: 200px;
background: blue;
}
.inner {
width: 100px;
height: 100px;
background: green;
}
<div class='outer'>
Outer
<div class='inner'>
Inner
</div>
</div>
Use event.stopPropagation();
Like this
document.getElementById("#seconddiv").addEventListener("click", function($event){
$event.stopPropagation();
});
Use event.stopPropagation:
document.getElementById('inner').addEventListener('click', function (event){
event.stopPropagation();
console.log ('Inner div clicked!');
});
https://jsfiddle.net/4L87qLte/
I have a page with two areas. There are boxes in each area. If the user clicks on a box in the top area, it gets moved to the bottom and vice versa. This works fine for the first movement. Theoretically, I should be able to move them back and forth between sections as I please.
Box HTML:
<div id="top-area">
<div class="top-box" id="blue-box"></div>
<div class="top-box" id="yellow-box"></div>
<div class="top-box" id="green-box"></div>
</div>
<hr/>
<div id="bottom-area">
<div class="bottom-box" id="red-box"></div>
<div class="bottom-box" id="gray-box"></div>
</div>
I use jQuery.remove() to take it out of the top section and jQuery.append() to add it to the other. However, when I try to move a box back to its original position, the event that I have created to move them doesn't even fire.
jQuery/JavaScript:
$(".top-box").on('click', function ()
{
var item = $(this);
item.remove();
$(this).removeClass("top-box").addClass("bottom-box");
$("#bottom-area").append(item);
});
$(".bottom-box").on('click', function ()
{
var item = $(this);
item.remove();
$(this).removeClass("bottom-box").addClass("top-box");
$("#top-area").append(item);
});
I have verified that the classes I am using as jQuery selectors are getting added/removed properly. I am even using $(document).on() to handle my event. How come my boxes are not triggering the jQuery events after they are moved once?
Please see the Fiddle: http://jsfiddle.net/r6tw9sgL/
Your code attaches the events on the page load to the elements that match the selector right then.
If you attach the listener to #top-area and #bottom-area and then use delegated events to restrict the click events to the boxes, it should work like you expect. See .on: Direct and Delegated Events for more information.
Use the below JavaScript:
$("#top-area").on('click', '.top-box', function ()
{
var item = $(this);
item.remove();
$(this).removeClass("top-box").addClass("bottom-box");
$("#bottom-area").append(item);
});
$("#bottom-area").on('click', '.bottom-box', function ()
{
var item = $(this);
item.remove();
$(this).removeClass("bottom-box").addClass("top-box");
$("#top-area").append(item);
});
Alternatively:
You could also change .on() to .live(), which works for "all elements which match the current selector, now and in the future." (JSFiddle)
JSFiddle
Here's another way you could work it:
function toBottom ()
{
var item = $(this);
item.remove();
item.off('click', toBottom);
item.on('click', toTop);
$(this).removeClass("top-box").addClass("bottom-box");
$("#bottom-area").append(item);
}
function toTop ()
{
var item = $(this);
item.remove();
item.off('click', toTop);
item.on('click', toBottom);
$(this).removeClass("bottom-box").addClass("top-box");
$("#top-area").append(item);
}
$(".top-box").on('click', toBottom);
$(".bottom-box").on('click', toTop);
#top-area, #bottom-area {
height: 100px;
border: 1px solid black;
padding: 10px;
}
.top-box::before {
content: "Top";
}
.bottom-box::before {
content: "Bottom";
}
#blue-box, #red-box, #yellow-box, #green-box, #gray-box {
width: 100px;
cursor: pointer;
float: left;
margin: 0 5px;
text-align: center;
padding: 35px 0;
}
#blue-box {
background-color: blue;
}
#red-box {
background-color: red;
}
#yellow-box {
background-color: yellow;
}
#green-box {
background-color: green;
}
#gray-box {
background-color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top-area">
<div class="top-box" id="blue-box"></div>
<div class="top-box" id="yellow-box"></div>
<div class="top-box" id="green-box"></div>
</div>
<hr/>
<div id="bottom-area">
<div class="bottom-box" id="red-box"></div>
<div class="bottom-box" id="gray-box"></div>
</div>
This basically removes the listener that switched the object to bottom to a listener that switches the object to the top and viceversa.
<body>
<div>
</div>
</body>
<script>
window.onclick = function() {do something;}
</script>
How do I prevent clicks inside of the div from carrying out the body's onclick function?
Try substituting <script> element for <style> element , utilizing e.target.tagName to determine if clicked element is DIV , return false if clicked element is DIV , else log clicked element to console
div {
width: 100px;
height: 100px;
border: 2px dotted tomato;
}
<body>
<div>
click
</div>
</body>
<script>
window.onclick = function(e) {
if (e.target.tagName === "DIV") return false
// do something;
else console.log(this)
}
</script>
If you only need to support modern browsers (>=IE11), use pointer-events:
div { pointer-events: none; }
Note that this will also inhibit all kinds of mouse-related effects, including hover.
change text of button when i click it. when i click on the button if it show make it hide .
$(function () {
if ($(".clickMe").text() == 'show') {
$(".clickMe").text("hide")
}
else {
$(".clickMe").text("show")
}
});
ShowDetials
Bind an event to it first, i meant a click event
$(".clickMe").click(function(){
$(this).text($(this).text() == "show" ? "hide" : "show");
});
DEMO
Change your code to this
Html
show
Script
$(function () {
$('.clickMe').click(function(){
$(this).text($(this).text() == "show" ? "hide" : "show");
});
});
Demo
It's better to apply some attribute (like class) to indicate state of button. Also, when you click on link, browser will follow it, prevent that (if needed effect). And your function is fired only once when everything is loaded, but not when clicking element. Bind click event to element:
$(document).ready(function() {
$(".btn").click(function(e) {
e.preventDefault(); // prevent from following link.
if ($(this).hasClass('active')) {
$(this)
.removeClass('active')
.text('Show Details');
} else {
$(this)
.addClass('active')
.text('Hide Details');
}
});
});
.btn {
text-decoration: none;
border: 1px solid green;
padding: 5px 10px;
font-weight: bold;
color: #454545;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Show Details
All purpose function
HTML part
<button type="submit" onclick="changeText(this,'Checking.. Please wait...')">Login</button>
JS part
// function to change text
function changeText(ref,text){
ref.innerHTML = text;
}