Question

在jQuery Mobile中，我有一个带按钮功能的列表视图。在每个列表按钮内，我有不同的附加按钮，如in this JSBin或代码：

<ul data-role="listview">
    <li>
      <div class="infos">
        <h3 class="ui-li-heading">Acura</h3>
        <p class="li-info ui-li-desc">model-description</p>
      </div>
       <div class="buttons" data-role="controlgroup" data-type="horizontal">
            <a data-role="button" data-mini="true" id="button_yes">Yes</a>
            <a data-role="button" data-mini="true" id="button_no">No</a>
        </div>
  </li>
</ul>

我现在需要在此构造中具有以下功能：

单击ListButton本身（listview中的li元素）切换活动状态
点击'内部按钮'触发单独的方法（不切换父级按钮的活动状态）
ListButton上的Taphold（li-element）显示/隐藏其他按钮

我当前的JS-construct是

var tapTimer,
    isTapHold = false;

var onListButtonClick = function($target){
  console.log('clicked LI');

  if($target.hasClass('active')){
    $target.removeClass('active');
  }
  else{
    $target.addClass('active');
  }
};

var toggleShowHideButtons = function(){
  if($('.buttons').is(':visible')){
    $('.buttons').hide();
  }
  else{
    $('.buttons').show();
  }
};

var onMobileDeviceVMouseUpDown = function(event){
  var $target = $(event.currentTarget);
  if(event.type === 'vmousedown') {
    console.log('DOWN');
    tapTimer = setTimeout(function () {
      isTapHold = true;
      console.log('this is a taphold');
      toggleShowHideButtons();
    }, 1000);
  } else if (event.type === 'vmouseup'){
    console.log('UP');
    clearTimeout(tapTimer);    
    if (!isTapHold) { //this is a tap, not a tap-hold
      onListButtonClick($target);
      console.log('this is a click');
    }
    isTapHold = false;
  }
  event.preventDefault();
  event.stopImmediatePropagation();
};

var onYesButtonClick = function(event){
  console.log('clicked YES');
  event.preventDefault();
  event.stopImmediatePropagation();
};
var onNoButtonClick = function(event){
  console.log('clicked NO');
  event.preventDefault();
  event.stopImmediatePropagation();
};

$('ul li').on('vmousedown vmouseup', onMobileDeviceVMouseUpDown);
$('#button_yes').on('vclick', onYesButtonClick);
$('#button_no').on('vclick', onNoButtonClick);

目前我的问题是我无法点击内部按钮而不会触发父ListButton的激活切换。有没有办法以不同的方式实现这种行为？

日Thnx！

如何在jQuery移动列表视图元素的嵌套按钮中处理不同事件的流程？

0 个答案: