在移动设备上第二次单击删除项目（jQuery）

Question

我有一个在其 LI 上具有悬停效果的 UL。悬停时，左侧会出现一个红色的 div，当您单击 LI 时，它会将一个类切换到其中的文本。在桌面版本上一切正常，但是当我切换到移动版本时，第一次点击应该只激活悬停效果。取而代之的是，它会触发悬停并立即切换一个类。我希望在移动版本上第一次点击激活悬停，然后如果它仍然处于活动状态，下一次点击切换类。请在移动版本上尝试代码，我的意思很清楚。 谢谢

$('ul').on('click', 'li', function () {
    $(this).toggleClass('completed');
});

$('ul').on('click', 'div', function (event) {
    $(this).parent().fadeOut(250, function () {
        $(this).remove();
    });
    //prevent event bubbling
    event.stopPropagation();
});

.container {
    width: 360px;
    margin: 0 auto;
    border: 1px solid black;
}

ul{
  list-style: none;
  padding:0;
  margin:0;
}

li{
  width: 100%;
  border: 1px solid black;
  display: flex;
}

li div{
  background-color:red;
  width:0;
  transition: 0.1s linear;
  display:inline-block;
}

li:hover div{
  width: 40px;
}

.completed {
    color: grey;
    text-decoration: line-through;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <h1>Groceries</h1>
  <ul>
  <li><div></div><p>carrot</p></li>
  <li><div></div><p>onion</p></li>
  <li><div></div><p>tomato</p></li>
  </ul>

更新：我快搞定了，第二次点击时第一次切换，问题是下一次切换也发生在双击时：

var isMobile = false;
var isClicked = 0;

$('ul').on('click', 'li', function () {

   if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera 
       Mini/i.test(navigator.userAgent) ) {
          isMobile = true;
          isClicked++;
   }

   if(!isMobile || isClicked > 1){
          $(this).toggleClass('completed');
          isClicked = 0;
   }
});

Answer 1

首先使用移动设备的 @media 查询禁用 CSS 悬停。

第二次创建一个jquery方法来点击/点击那个

您要在其中显示红色 div。你可以做这样的事情

$('li').on('click' , function(){
    if($(window).width() <= 760){ // Enter maximum width of mobile device here for which you want to perform this action
      // show red div here
    }
    return false;
});

还要记住@media 和 $(window).width() 应该具有相同的像素/大小

编辑：

尝试替换它

var isMobile = false;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera 
   Mini/i.test(navigator.userAgent) ) {
      isMobile = true;
}
$('ul').on('click', 'li', function () {



   if(isMobile){
      $(this).toggleClass('completed');
   }
});

并让其他代码在click函数中再试一次

Answer 2

您应该使用touchstart 事件来处理移动设备上的触摸事件，但不要忘记检查 ontouchstart 是否可用。

$('ul').on('click', 'li', function() {
  if ('ontouchstart' in document.documentElement) {
    if ($(this).hasClass('hover')) {
      $(this).toggleClass('completed');
    }
  } else {
      $(this).toggleClass('completed');
  }
});

$('ul').on('touchstart', 'li', function(e) {
  var link = $(this); //preselect the link
  if (link.hasClass('hover')) {
    return true;
  } else {
    link.addClass("hover");
    $('li').not(this).removeClass("hover");
    e.preventDefault();
    return false; //extra, and to make sure the function has consistent return points
  }
});

$('ul').on('click', 'div', function(event) {
  $(this).parent().fadeOut(250, function() {
    $(this).remove();
  });
  //prevent event bubbling
  event.stopPropagation();
});

.container {
  width: 360px;
  margin: 0 auto;
  border: 1px solid black;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  width: 100%;
  border: 1px solid black;
  display: flex;
}

li div {
  background-color: red;
  width: 0;
  transition: 0.1s linear;
  display: inline-block;
}

li:hover div,
li.hover div{
  width: 40px;
}

.completed {
  color: grey;
  text-decoration: line-through;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1>Groceries</h1>
  <ul>
    <li>
      <div></div>
      <p>carrot</p>
    </li>
    <li>
      <div></div>
      <p>onion</p>
    </li>
    <li>
      <div></div>
      <p>tomato</p>
    </li>
  </ul>
</div>