带有内部链接的可点击容器 [英] Clickable Container with inner links

问题描述

我很抱歉，如果这已经存在，但我无法找到像这样的东西。我的愚蠢问题是：

我有一个可点击的容器，里面有链接，看起来有点像：

 < div onclick =someFunction（）> 
< ...> 
< ...> 
< button onclick =otherFunction（）> 
< / div> 
  

我希望能够点击容器中的任何位置并打开某些内容，但我也希望能够让按钮在里面工作。我非常感谢所有的帮助，并为这个愚蠢的问题表示歉意。

解决方案

它会像你想的那样工作，当你点击按钮，点击将在ur按钮以及div检查codepen上触发

event.stopPropagation（）

  var someFunction = function（event）{alert（'< someFunction>'）; var otherFunction = function（event）{alert（otherFunction  - >）;} var otherFunctionStopPropagation = function（event）{alert（| otherFunction |）; event.stopPropagation（）;}  

.Some {height：为200px;背景颜色：黄色;的z-index：1; } .other {z-index：2;}

< ; div onclick =someFunction（）class =Some> < button onclick =otherFunction（event）class ='other'id ='other'> otherFunction< / button> < button onclick =otherFunctionStopPropagation（event）class ='other'id ='other'> otherFunctionStopPropagation< / button> < a onclick =otherFunctionStopPropagation（event）href =''class ='other'id ='other'> a_otherFunctionStopPropagation< / a>< / div>

https://codepen.io/mastersmind/pen/EbLEBb

My apologies if this already exists but I was unable to find anything like it. My stupid question is:

I have a clickable container with links inside that looks kinda like:

<div onclick="someFunction()">
    <...>
    <...>
    <button onclick="otherFunction()">
</div>

I want to be able to click anywhere in the container and open up something but I also want to be able to have the button inside work. My appreciation for all assistance in advance and apologies for the dumb question.

解决方案

It will work like ur thinking, when u click on button, click will fire on both on ur button as well as on div check codepen

event.stopPropagation()

var someFunction = function(event){
  alert('<someFunction>');
  
}

var otherFunction = function(event){
  alert("otherFunction ->");
}

var otherFunctionStopPropagation = function(event){
  alert("|otherFunction|");
  event.stopPropagation();
}

.Some{
  height:200px;
  background-color:yellow;
  z-index:1;
  
}

.other{
  z-index:2;
}

<div onclick="someFunction()" class="Some">
  <button onclick="otherFunction(event)"  class='other' id='other'>otherFunction</button>
  <button onclick="otherFunctionStopPropagation(event)"  class='other' id='other'>otherFunctionStopPropagation</button>

  <a onclick="otherFunctionStopPropagation(event)" href='' class='other' id='other'>a_otherFunctionStopPropagation</a>
</div>

https://codepen.io/mastersmind/pen/EbLEBb

这篇关于带有内部链接的可点击容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！