Question

在一个cordova / ionic应用程序中，有一个parent-div，on-hold-listener附加了一个child-div，它订阅了on-tab事件，如下所示：

<div on-hold="doSomething()">
   <div on-tap="doSomething2()">...</div>
</div>

有时会有效，但是当按下时间超过500毫秒时，有一些情况表明执行了标签而不是暂停。

这可能会以更好的方式完成吗？请考虑到child-div完全填写了父母，它应该保持不变。

提前致谢。

Answer 1

如果您拥有另一个div的div父级，则会传播事件。你可以在这里试试：

.c2 {
  width: 200px;
  height: 200px;
  background-color: red;
}
.c1 {
  width: 220px;
  height: 220px;
  background-color: yellow;
}

<div class="c1" onclick="alert('squareParent');">
  <div class="c2" onclick="alert('squareChild');">
  </div>
</div>

为避免这种情况，您需要停止传播：

document.getElementById("c1").addEventListener('click', function(e) {
  alert("c1");
}, false);

document.getElementById("c2").addEventListener('click', function(e) {
  alert("c2");
  e.stopPropagation();
}, false);

#c2 {
  width: 200px;
  height: 200px;
  background-color: red;
}
#c1 {
  width: 220px;
  height: 220px;
  background-color: yellow;
}

<div id="c1">
  <div id="c2">
  </div>
</div>

如果您想了解更多信息，可以查看有关javascript bubble的更多信息。

Answer 2

在尝试使用stopPropagation之后，我想出了以下答案，需要setTimeout来检查鼠标/光标是否正在被保留。

当点击child-div（红色）时，doSomething2会被警告，而保留child-div警告会改为父母的事情：

＆＃13;

var holding = false;
var secondFunctionCall = false;

document.getElementById("c1").addEventListener('mousedown', function(e) {
 
  holding = true;

  setTimeout(function(){
    if(holding){
      secondFunctionCall = false;
      alert("calling doSomething()");
    }
  },500);

}, false);

document.getElementById("c2").addEventListener('mousedown', function(e) {

  holding = true;
  secondFunctionCall = true;

}, false);

document.getElementById("c2").addEventListener('mouseup', function(e) {

  holding = false;

  if(secondFunctionCall){
    alert("calling doSomething2()");
  }

}, false);

＆＃13;

#c2 {
  width: 200px;
  height: 200px;
  background-color: red;
}
#c1 {
  width: 220px;
  height: 220px;
  background-color: yellow;
}

＆＃13;

<div id="c1">
  <div id="c2">
  </div>
</div>

＆＃13;

将此代码转换为cordova-app时，鼠标事件类型必须由触摸事件类型替换，因为它已被回答here。

Ionic Event-LIsteners on-hold / on-tab父母/子女问题

2 个答案: