代码之家 › 专栏 › 技术社区 › Miomir Dancevic

防止鼠标单击父绝对元素

css javascript

-1

Miomir Dancevic · 技术社区 · 4 年前

我对css中的两个绝对元素有这样的问题

<div class="opacity" (click)="hideContext()">
    <div class="context-menu-wrapper">
        <div class="list-group">
            <span (click)="goThere()" class=" list-group-item pl-25 pr-29">
                <i class="icon-pencil "></i>1
            </span>
            <span (click)="goThere()" class=" list-group-item">
                <i class="icon-pencil "></i>2
            </span>
        </div>
    </div>
</div>

这里是两个元素的css

.opacity {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.3);
    z-index: 999999;
}

.context-menu-wrapper{
    max-width:250px; 
    min-width: 250px; 
    pointer-events: none;
    position: absolute;
    left: 20px;
    top: 50px;
}

当我点击一个函数时,它总是调用函数hideContext(),因为父函数是绝对的,子函数是绝对的

0 回复 | 直到 4 年前

Pranav Rustagi 4 年前

试试这个:

HTML: 习惯于 onclick 用于调用函数的属性。

CSS: 远离的 pointer-events: none; 从…起 .context-menu-wrapper .

JavaScript: 补充 event.stopPropagation() 在里面 goThere() 因此,click不会调用与任何祖先元素绑定的click事件。

function hideContext(event) {
  alert("hideContext()");
}

function goThere() {
  event.stopPropagation();
  alert("goThere()");
}

.opacity {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 999;
}

.context-menu-wrapper {
  max-width: 250px;
  min-width: 250px;
  background: red;
  position: absolute;
  z-index: 9999;
  left: 20px;
  top: 50px;
}

span {
  background: blue;
  padding: 0 20px;
}

<div class="opacity" onclick="hideContext(event)">
  <div class="context-menu-wrapper">
    <div class="list-group">
      <span onclick="goThere()" class=" list-group-item pl-25 pr-29">
                <i class="icon-pencil "></i>1
            </span>
      <span onclick="goThere()" class=" list-group-item">
                <i class="icon-pencil "></i>2
            </span>
    </div>
  </div>
</div>