How to trigger function only in parent div, not child - javascript

<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>

Related

Dealing with click event handler on inner div and outer div

I've got modal window: parent div (wrapper with dark transparent background) and child div (with buttons, inputs and text). Both of them are fixed positioning.
In JavaScript I do simple code: If I click on parent fixed div (.modal-wrapper) - it must close (remove) whole modal window. And same result if I click on close button ('X' button in the corner of modal window).
Here is my simple JS code:
function doModalClose() {
modalWrapper.remove();
}
closeBtn.addEventListener('click', doModalClose);
modalWrapper.addEventListener('click', doModalClose);
And html markup:
<div class="modal-wrapper">
<div class="modal-window">
<div class="btn-wrapper"><span class="close-btn"></span></div>
other modal elements...
</div>
</div>
The main question is that when I click on parent div it works correctly, and as when I click on .close-btn. But if I clicked on child div (.modal-window) it closes whole modal too, which incorrect!
I make a simple alert(); check: when I click on parent one it should say Modal Wrapper and when I click on child one it should say Modal Window.
And when I click on child window it calls two alert(); functions: first is child's Modal Window and after that parent's Modal Wrapper.
So that's the reason of my issue, but I don't understand the reason of that kind of behavior. I use on child div z-index: 2; and z-index: 1; on parent div, but it still doesn't help.
Thank you for your attention!
This happens because one is inside another one, if you click the inner div you also click the outer one because the inner is inside the outer one. You need an extra handler just for .modal-window and to use event.stopPropagation(). Run this code snippet and see by yourself.
function doModalClose() {
modalWrapper.remove();
}
var closeBtn = document.getElementsByClassName('close-btn')[0]
var modalWrapper = document.getElementsByClassName('modal-wrapper')[0]
var modalWindow = document.getElementsByClassName('modal-window')[0]
var button1 = document.getElementsByClassName('button1')[0]
var button2 = document.getElementsByClassName('button2')[0]
closeBtn.addEventListener('click', doModalClose);
modalWrapper.addEventListener('click', doModalClose);
modalWindow.addEventListener('click', function (event) {
event.stopPropagation()
})
button1.addEventListener('click', function (event) {
alert('button1')
})
button2.addEventListener('click', function (event) {
alert('button2')
})
div {margin: 5px; padding: 5px}
.modal-wrapper {border: 2px solid red}
.modal-window {border: 2px solid blue}
.btn-wrapper, .btn {border: 2px solid green}
<div class="modal-wrapper">modal-wrapper
<div class="modal-window">modal-window
<div class="btn-wrapper"><span class="close-btn">button</span></div>
<a class="btn button1">Button1</a>
<a class="btn button2">Button2</a>
</div>
</div>

JS toggle for multiple div elements

What should I do if I have multiple elements in HTML foreach and I need to make them all a toggle slider what opens div block with specific information about the element and I need to add close button too if a user wants to close the div. Sorry, I don't have any code to show because I did not find anything that suits my needs. The main idea is to have a product page with products that are displayed on a page using foreach... Then when you click on a product toggle div block is opened with information about a product. What should I search and what to use, I can't find anything because I am limited with my knowledge. Sorry for terrible English.
You can easily control the visibility of an element either within the div you're clicking or after it using a class you toggle. Here's an example controlling the div after one of the divs that controls the toggle:
document.getElementById("container").addEventListener("click", function(e) {
var toggleDiv = e.target.closest(".toggle");
if (toggleDiv && this.contains(toggleDiv)) {
toggleDiv.classList.toggle("closed");
}
});
.closed + .detail {
display: none;
}
<div id="container">
<div class="toggle closed">Product A</div>
<div class="detail">Details about Product A</div>
<div class="toggle closed">Product B</div>
<div class="detail">Details about Product B</div>
<div class="toggle closed">Product C</div>
<div class="detail">Details about Product C</div>
</div>
The key bits there are:
Hiding the details via CSS with the adjacent sibling combinator (+)
Toggling the class on the toggling div
I used event delegation to hook up the handler, but you could instead hook it up to each individual div if you preferred. Note that the Element#closest method I used is relatively new, you may need a polyfill or a loop on parentNode instead.
From what i have understood.
You need to toggle div elements using button tag and the button u click will show that particular div element.
<div id="container1" class={container1 ? "show" : "hide"}>
container1
</div>
<div id="container2"class={container2 ? "show" : "hide"}>
container2
</div>
<div id="container3"class={container3 ? "show" : "hide"}>
container3
</div>
and three button tags to call toggle function to show the three div element.
<div class="container">
<button name="container1" onclick=(toggle())>Container1</button>
<button name="container2" onclick=(toggle())>Container2</button>
<button name="container3" onclick=(toggle())>Container3</button>
</div>
toggle function
function toggle(e) {
if(e.target.name === 'container1'){
container1 = true;
}
else if(e.target.name === 'container2'){
container2 = true;
}
else if(e.target.name === 'container3'){
container3 = true;
}
}
css part
.show{
display: block;
}
.hide{
display: none;
}

How can i make a button clicked when i just click a div

<div id="mydiv"><div>
<button style="visibility:hidden; float:left"></button>
I wanna make the hidden button as is clicked when someone click the div "mydiv".
As AndrewL said, you don't need a button for this. But if you want to use a button anyways, simply assign a eventListener to your div that simulates a click on the button:
document.querySelector('#mydiv').addEventListener('click', () => {
document.querySelector('button').click();
});
Example
(I added some CSS rules and an extra function for visualization.)
document.querySelector('#mydiv').addEventListener('click', () => { // Listen for clicks on the div
document.querySelector('button').click(); // Simulate a click on the button
});
function test() { // This function gets called when clicking the button
console.log("Click!");
}
<div id="mydiv" style="height: 100px; width: 100px; background-color: red;">
<div>
<button style=" visibility:hidden; float:left; " onclick="test()"></button>
</div>
</div>
You dont need a hidden button for this. Just assign a click listener to the div itself using js like this:
const btn = document.getElementById('mydiv');
function doSomething(){
//run your script here when div is clicked
}
btn.addEventListener('click', doSomething);
You don't really need the hidden button to catch the click event. But if you really need it:
<div id="mydiv" onclick="document.getElementById('btn').click()">click on me<div>
<button id="btn" style="display:none;" ></button>
With jQuery, you can do something like this:
$('#div_id').click(function(){$('#btn_id').trigger('click');});
$('#btn_id').click(function(){//Business logic here on btn click
});

How to detect that the HTML element has text by clicking on text content area?

I have text content and a boxed element in a div but still changes happen when I click on boxed element while I need to make changes only when I click on text content.
Here is the code:https://jsfiddle.net/Issact/u0g8LLLo/
<div>
some text
<span class="box"></span>
</div>
<div>
some text
</div>
<div><span class="box"></span></div>
JS:
$(document).on('click','div', function(){
if (!$(this).text().trim().length > 0) {
$(this).text("foo");
} else {
$(this).append('<span>You clicked on a text</span>');
}
});
When you bind an event handler to a node, or use event delegation, this refers to the node the event was bonded to (or delegated to in the case of on).
Click the .box inside the 1st div element, gets the div as this. Since the div element contains text, you the wrong result.
Instead you should get the event target. The target is the actual element clicked.
$(document).on('click', 'div', function(e) {
var $target = $(e.target); // the event target
if (!$target.text().trim().length > 0) {
$target.text("foo");
} else {
$target.append('<span>You clicked on a text</span>');
}
});
.box {
background-color: green;
height: 50px;
width: 50px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
some text
<span class="box"></span>
</div>
<div>
some text
</div>
<div><span class="box"></span></div>
As long as you have id's and classes you can try comparing ids or classes
$(document).on('click','div', function(e){
if (e.target.id.toString() == "box" || $(e.target).hasClass("box")) {
$(this).append('<span>foo</span>');
} else {
$(this).append('<span>You clicked on a text</span>');
}
https://jsfiddle.net/q6vbohxm/
This is the way you should do. As this selects the body element and any element inside body that has text, will go into the if statement, if you need elese statement as well, you add so after the if.
$(document).on('click','body', function(e){
var clickedTag, text;
clickedtag = e.target;
text = $(clickedtag).text().trim();
if(text.length > 0){
console.log(text);
}
});
wrap your text in separate element and fire click event on that element and also use .stopPropagation() method...
$("#demo").click(function(event){
event.stopPropagation();
alert("your text element was clicked");
});
This is happening because of event bubbling, so we need to stop that. Jquery having method to stop it event.stopPropagation();. Here I used div * selector to prevent firing event for all the child element inside div. Instead of div you can use any class to differentiate from other div
$(document).on('click','div', function(){
$(this).append('<span>You clicked on a text</span>');
}).on("click","div *", function(e){e.stopPropagation();});
.box {
background-color:green;
height:50px;
width:50px;
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
some text
<span class="box"></span>
</div>

Child div affects parent div in css and triggers jquery method

I have parent div with class a "very-big-div" that nests another "container-div" that by its turn also nests another child divs. The very big div's made to act like a button and the div that come right after it is a container that appears when I click the very big div.
<div class="very-big">
<div class="container">
<!-- Some other more nested divs that has anchors and buttons -->
<div class="friend-request">
<div class="button-div">
<button class="accept">Trigger</button>
<button class="refuse">Trigger</button>
</div>
</div>
</div>
</div>
The problem is 2 things first: the css problem has not yet been solved
I assigned a hover pseudo class for the "very-big-div", and whenever I hover the "container-div" the hover properties(background-color) is applied to the "very-big-div". This is not what I intend to make, I want to only hover "very-big" div for the hover to apply.
.very-big{
background-color:green;
}
The second problem is : I have a jquery that deals with the container so it is toggled on/off by the "very-big-div"
$(document).ready(function(){
$("#container-div").hide();
$("#very-big-div").click(function(){
$("#container-div").toggle();
});
});
the container has both anchor and button tags whenever I click the an anchor or a button inside the container it is toggled to close itself, and that is not what I want, what I want is just when I only press the "very-big-div" the toggle is activated.
Same as #Jhecht has given the answer, I have just inherited his to mine.
You can stop propagation of the click of child element that trigger toggle by using target and excluding all the child elements of your .very-big container as:
$(".very-big").click(function(e) {
var target = $(e.target);
if (!target.is('.very-big *')) {
$(".container").toggle();
}
});
Code Snippet:
$(document).ready(function() {
$(".container").hide();
$(".very-big").click(function(e) {
var target = $(e.target);
if (!target.is('.very-big *')) {
$(".container").toggle();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="very-big">
Other Text
<div class="container">
This is text to fill stuff out so I can click on it.
</div>
</div>
This works for me, but I am not sure if it is what you need.
Please add in the minimum HTML, CSS, and Javascript needed to fully recreate the error you are seeing.
$(document).ready(function() {
$(".container").hide();
$(".very-big").click(function(e) {
console.log(e);
var current = $(e.toElement);
if (current.is('.container')) {
e.stopPropagation();
return false;
}
$('.container').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="very-big">
Other Text
<div class="container">
This is text to fill stuff out so I can click on it.
</div>
</div>

Categories

Resources