Ionic Event-LIsteners на удержании/на вкладке Родительская/дочерняя проблема

В приложении Cordova/ionic есть родительский div, к которому подключен прослушиватель on-hold, и дочерний div, который подписан на события на вкладке, например:

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

Время от времени это срабатывает, но были ситуации, когда on-tab выполнялся вместо on-hold, когда время нажатия было больше 500 мс.

Можно ли это сделать лучше? Пожалуйста, примите во внимание, что дочерний элемент полностью заполняет родитель, и он должен оставаться таким.

Заранее спасибо.


cordova javascript ionic
person Blauharley    schedule 14.03.2015    source источник
comment
Если вы хотите, чтобы doSomething() находился только в вашем родительском div, вы можете получить целевой элемент в своей функции и проверить, является ли он родительским элементом, который был приостановлен.   -  person Arnaud Bertrand    schedule 14.03.2015
comment
Да, это правда, но я хочу предотвратить запуск дочернего элемента по нажатию, когда это будет событие удержания. doSomething всегда выполняется родителем, как и doSomething2 — дочерним, поэтому проверка цели здесь будет напрасной.   -  person Blauharley    schedule 14.03.2015

Ответы (2)


arrow_upward
1
arrow_downward

Когда у вас есть родитель 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, если вам нужна дополнительная информация.

person Arnaud Bertrand    schedule 14.03.2015
comment
Попробуйте: element.bind('click', function (event) { ....your function... event.stopPropagation(); }); в вашем контроллере - person Arnaud Bertrand; 14.03.2015
comment
У меня была небольшая попытка с stopPropagation, к сожалению, это не сработало, как планировалось, поэтому я немного изменил ваш ответ, могу ли я прикрепить его к вашему ответу, потому что я могу признать ваш ответ правильным и дать вам баллы;) - person Blauharley; 14.03.2015
comment
Да, конечно, если это сработало для вас, то это может сработать и для других людей. - person Arnaud Bertrand; 14.03.2015
comment
Извините, Бертран, мне пришлось дать другой ответ, потому что он был удален. - person Blauharley; 14.03.2015

arrow_upward
0
arrow_downward

После экспериментов с stopPropagation я пришел к следующему ответу, который требует setTimeout для проверки удержания мыши/курсора.

При простом нажатии на дочерний div (красный) doSomething2 предупреждается, тогда как удерживание дочернего div предупреждает doSomething родителя:

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);
#c2 {
  width: 200px;
  height: 200px;
  background-color: red;
}
#c1 {
  width: 220px;
  height: 220px;
  background-color: yellow;
}
<div id="c1">
  <div id="c2">
  </div>
</div>

При переносе этого кода в приложение Cordova типы событий мыши должны быть заменены типами событий касания, поскольку на них отвечает здесь.

person Blauharley    schedule 14.03.2015