Howto: Div with Onclick Inside Another Div with Onclick JavaScript

Howto: div with onclick inside another div with onclick javascript

Basically there are two event models in javascript. Event capturing and Event bubbling. In event bubbling, if you click on inside div, the inside div click event fired first and then the outer div click fired. while in event capturing, first the outer div event fired and than the inner div event fired. To stop event propagation, use this code in your click method.

   if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();

div with onclick inside another div click also firing

Simply check if evt.target != this before proceeding further.

Demo

var content= document.querySelector('.test-content');    content.addEventListener('click', function(evt) {      if ( evt.target != this ) return false; //notice this line      alert("fired");      evt = evt || window.event;      stopPropagation(evt);        });     function stopPropagation(evt) {    if (typeof evt.stopPropagation == "function") {        evt.stopPropagation();    } else {        evt.cancelBubble = true;    }  }

<div class="test-content" style="width:100%;height:200px;background-color:yellow" >This is Div A<div style="width:20%;height:100px;background-color:red"> This is Div B</div></div>

Make the click on inner div not to call the outer one's onClick function

$('yourinnerDiv').click(function(e){e.stopPropagation()});

This will stop click event bubbling up the DOM.

http://api.jquery.com/event.stopPropagation/

https://developer.mozilla.org/en/docs/DOM/event.stopPropagation

Div inside of another Div avoid click

Event bubbles up. Use .stopPropagation() to stop it from moving to parent.

let buttonTwoPressed = (event) =>{
event.stopPropagation();
}

Clicking link inside div firing div's onclick

You can apply event.stopImmediatePropagation(); to the link. According to the API, this keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree (https://api.jquery.com/event.stopimmediatepropagation/).

Here is the fiddle: http://jsfiddle.net/dxrdrqrc/

clicking inner div to trigger outer div event

As it turns out, this seems to solve my problem:

import React from 'react';

const Item = props => {
  const { itemid, data, onClick } = props;
  
  return (
    <div itemid={itemid} type="button" tabIndex={0} onKeyPress={onClick} role="button" onClick={onClick}>
      <div style={{ pointerEvents: 'none' }}>
        {itemid}
      </div>
      <div style={{ pointerEvents: 'none' }}>
        {data}
      </div>
    </div>
  )
}

export default Item;

I guess the pointerEvents: 'none' keeps the child divs from being clickable, so the outer div then takes the click.

Still hoping for a better solution, as this seems a little strange.

React - how to stop div onClick from changing sibling divs

You're saving a boolean value as a div element is open or not. So this value is considered for all div element's because there is no identifier which div element is open. You need to save a div element value to identify the open div element.

So you can use a div element's index instead of a boolean value. For example, try the below code.

import React, { useState} from "react";
import { Panels } from "../../components/index";
import { data } from "../../constants/index";
import "./gallery.css";

const Gallery = () => {
  const [isOpen, setIsOpen] = useState(null);
    
  return (
    <div className="panels">
      {data.restaurants.map((restaurant, index) => (
        <div
          className={`panel panel${index} ${isOpen === index ? "open open-active" : ""}`}
          onClick={() => setIsOpen(index)}
        >
          <Panels
            key={restaurant.name + index}
            description={restaurant.description}
            name={restaurant.name}
            website={restaurant.website}
          />
        </div>
      ))}
    </div>
  );
};

export default Gallery;

---

Related Topics