Question

我在divs页面中连续两次HTML

首先div包含span中relative的{{1}}。这就是为什么它超过了第二个div。

我有一个与两个div关联的点击事件。

当我点击第position个span的部分时，它会触发第一个div点击事件，但我想在此处触发第二个div's点击事件

有没有办法实现这一目标。

div's

function div1Clicked() {
  alert('div 1 clicked');
}

function div2Clicked() {
  alert('div 2 clicked');
}

#div1 {
  border: 1px solid gainsboro;
  height: 100px;
  width: 13%;
  background: red;
  display: inline;
  float: left;
}

#div1 span {
  width: 316px;
  height: 30px;
  background: green;
  float: left;
  margin-top: 39px;
  position: relative;
}

#div2 {
  border: 1px solid gainsboro;
  height: 100px;
  width: 13%;
  background: red;
  display: inherit;
  float: left;
}

Answer 1

如果您不需要在子跨度上使用任何悬停状态，您可以这样做。请记住，这与你的html略有不同，但它可以很容易地转换为你的html / css，我现在没有时间去做。

你要做的是在:after更高的两个div上添加z-index，这将覆盖span并作为javascript的触发区域。不要介意我看起来很奇怪的css＆＃34;它的BEM。你可以使用你的javascript触发器，它会很好用。如果您不熟悉所选浏览器中的devtools，则可以使用alert()代替console.log()。

DEMO

<div class="block">
  <div class="block__column block__column--left js-action-1"></div>
  <div class="block__column block__column--right js-action-2"></div>

   <div class="block__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, voluptas!</div>
</div>


.block {
  display: flex;
  position: relative;
}

.block__column {
  width: 50%;
  height: 20rem;
  position: relative;
}

.block__column:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.block__column:hover {
  cursor: pointer;
}

.block__column--left {
  background-color: deepskyblue;
}

.block__column--right {
  background-color: deeppink;
}

.block__description {
  position: absolute;
  top: 50%;
  left: 2rem;
  right: 2rem;
  background-color: white;
}


$('.js-action-1').on('click', function() {
 console.log('clicked the left column');
});

$('.js-action-2').on('click', function() {
 console.log('clicked the right column');
});

Answer 2

<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div onclick="div1Clicked()" id="div1" style="
    border: 1px solid gainsboro;
    height: 100px;
    width: 13%;
    background: red;
    display: inline;
    float: left;
">
<span style="
    width: 316px;
    height: 30px;
    background: green;
    float: left;
    margin-top: 39px;
    position: relative;
">
</span>
</div>

<div onclick="div2Clicked()" id="div2" style="
    border: 1px solid gainsboro;
    height: 100px;
    width: 13%;
    background: red;
    display: inherit;
    float: left;
">
<div>
</div></div>
<script>
function div1Clicked(){
if($("div:first").width() < event.offsetX)
div2Clicked()
else
alert('div 1 clicked');
}

function div2Clicked(){
alert('div 2 clicked');
}
</script>
</body></html>

如果触发事件父elemnet（div1）事件，则单击span元素，因此无法获得正确的输出。但是你得到输出一些检查条件。请参考下面的片段

function div1Clicked(){
if($("div:first").width() < event.offsetX)
div2Clicked()
else
alert('div 1 clicked');
}

Answer 3

由于跨度位于div1中，当它被点击时，它将仅触发div1 click事件，即使它与div2重叠。因此，如果您可以使用绿色范围的点击事件，它可能会有所帮助。它仍会触发div1点击事件。

    <html><head></head>
    <body>
    <div onclick="div1Clicked()" id="div1" style="
        border: 1px solid gainsboro;
        height: 100px;
        width: 13%;
        background: red;
        display: inline;
        float: left;
    ">
    <span style="
        width: 316px;
        height: 30px;
        background: green;
        float: left;
        margin-top: 39px;
        position: relative;
    " onclick="spanClicked()">
    </span>
    </div>

    <div onclick="div2Clicked()" id="div2" style="
        border: 1px solid gainsboro;
        height: 100px;
        width: 13%;
        background: red;
        display: inherit;
        float: left;
    ">
    <div>
    </div></div>
    <script>
    function div1Clicked(){
    alert('div 1 clicked');
    }

    function spanClicked(){
    alert('span clicked');
    }

    function div2Clicked(){
    alert('div 2 clicked');
    }
    </script>
    </body></html>

Answer 4

如果click-events上的span不是必需的，您可以将pointer-events: none应用于该范围，该范围将完全忽略该范围内的点击次数。

＆＃13;

function div1Clicked() {
  alert('div 1 clicked');
}

function div2Clicked() {
  alert('div 2 clicked');
}

＆＃13;

#div1 {
  border: 1px solid gainsboro;
  height: 100px;
  width: 13%;
  background: red;
  display: inline;
  float: left;
}

#div1 span {
  width: 316px;
  height: 30px;
  background: green;
  float: left;
  margin-top: 39px;
  position: relative;
  pointer-events: none;  /*This will make the span click-through*/
}

#div2 {
  border: 1px solid gainsboro;
  height: 100px;
  width: 13%;
  background: red;
  display: inherit;
  float: left;
}

＆＃13;

<body>
  <div onclick="div1Clicked()" id="div1">
    <span></span>
  </div>
  <div onclick="div2Clicked()" id="div2">
    <div>
    </div>
  </div>

＆＃13;

Answer 5

您可以执行以下代码段...

$('.first,.second').click(function(){
	alert($(this).attr('class'))
})

.first{
    width:200px;
    height:300px;
    background-color:red;
    display:inline-block;
    float:left;
    position:relative;
}
span{
    position:absolute;
    left: 30%;
top: 30%;
}
.first:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.second:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
}
.second{
    width:200px;
    height:300px;
    background-color:green;
    display:inline-block;
    position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="first">
      
    </div>
    <div class='second'>
    </div>
     <span>Hello World....</span>
</body>

HTML - 来自一个div的子元素覆盖其他div

5 个答案: