Clever Geek Handbook

Parent div that can be clicked between another div

.black {
  background-color: black;
  width: 500px;
  height: 500px;
}

.red {
  background-color: red;
  width: 200px;
  height: 200px;
}
      

        
        
        
      

    
<a href="#">    
    <div class="black">
        <div class="red"></div>
    </div>
</a>
Run codeHide result


I'm trying to make the entire div "black" clickable with a hyperlink but without the "red" div area with success. I dont know if i allow it with css or JS or just just HTML5

+3


source to share


6 answers


UPDATED

I forgot to wrap the target with a jquery object .. sorry

if you want the child element not to fire the event you can do it via jquery



 $('a').click( function(e) {
  if($(e.target).is('.black')) {
    console.log('whatever..');
    // or do whatever you want
   } else {
    e.preventDefault();
    }
  });

as for cursor you can do it via css

.red {
cursor: default;
}
+1


source


You can use event.stopPropagation

:

Html

<a href="#">    
    <div class="black">
        <div class="red"></div>
    </div>
</a>

Js



$(".black").click(function(e) {
  alert("black");
});

$(".red").click(function(e) {
  e.stopPropagation();
});

CSS

.black {
  background-color: black;
  width: 500px;
  height: 500px;
}

.red {
  background-color: red;
  width: 200px;
  height: 200px;
}

EXAMPLE FIDDLE

0


source


It might be worth considering a different approach in terms of structuring.

  • Remove .mr-red

    from.mr-black

  • Wrap .mr-red

    and .mr-black

    in.mr-brown

  • Position .mr-red

    absolute

    and place accordingly in .mr-brown

    , overlaying.mr-black 

.mr-brown {
  position: relative;
  height: auto;
  width: auto;
  display: block;
}

.mr-black {
  background-color: black;
  width: 500px;
  height: 500px;
}

.mr-red {
  background-color: red;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
}
      

        
        
        
      

    
<div class="mr-brown">
  <a href="#">
    <div class="mr-black"></div>
  </a>
  <div class="mr-red"></div>
</div>
Run codeHide result


0


source


I would completely separate them and use absolute positioning to put the red square in the right place.

.wrapper {
  position: relative;
}

.wrapper a {
  display: inline-block;
}

.black {
  background-color: black;
  width: 500px;
  height: 500px;
}

.red {
  background-color: red;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
}
      

        
        
        
      

    
<div class="wrapper">
  <a href="#">
    <div class="black">
    </div>
  </a>
  <div class="red"></div>
</div>
Run codeHide result


0


source 


const clickableBox = document.querySelector(".black")
const anchor = document.querySelector("a")
anchor.addEventListener("click", (e) =>
    e.target !== clickableBox && e.preventDefault())

https://jsfiddle.net/korwx3qv/4/

0


source


This is an interesting question. Please take a look here:

<a href="#">    
    <div class="black">
        <div class="red"></div>
    </div>
</a>

      

        
        
        
      

    
.black {
  background-color: black;
  width: 500px;
  height: 500px;
}

.red {
  background-color: red;
  width: 200px;
  height: 200px; 
  cursor: default;
}

      

        
        
        
      

    
 $('a').click( function(e) {
  if($(e.target).is('.black')) {
    alert('.black');    
   } 
  });

And a demo is here: https://jsfiddle.net/kkz6y7uo/2/

Hope this helps you :)

0


source






More articles:


All Articles