javascript - 鼠标点击和触摸的不同行为 - 触摸屏功能错误，但使用鼠标

Question

Stackoverflow 对当前版本的帮助太大了，但目前我完全迷失了方向，因为我不知道如何解决一个问题。我将非常感谢您的任何建议。

我有带参数的产品容器。它们出现在鼠标上:悬停(用 css 完成)。问题是如果有人点击手机，它会触发两个事件:点击和鼠标悬停。但我需要移动设备的不同行为。所以我使用了 stackoverflow 的解决方案，在那里我可以检查浏览器是否知道 touchstart 事件。在有人使用可触摸屏幕但使用鼠标之前，它工作正常。因此，该用户将单击容器，参数将显示出来，而不会重定向到产品详细信息。但是鼠标行为是错误的。

我需要的是，如果有人点击图片，它会首先显示参数，第二次点击时它会重定向到产品详细信息(不同的行为仅在点击按钮时会自动将用户重定向到产品详细信息)。但是如果有人使用鼠标，我们有 :hover 效果，所以即使第一次点击图片也可以将用户重定向到产品详细信息页面。

当前的 javascript 代码已被注释，因此存在在台式机和移动设备上运行良好的解决方法。但它不适用于带有带鼠标的可触摸屏幕的混合设备。注释代码是我在使用 mouseenter/mouseleave 函数添加变通方法时考虑解决方案的方式。这不适用于移动设备，因为它们也会触发这些事件。 touchstart/touchend 事件也有同样的问题。

有人可以帮忙吗？

/*var usedMouse = false;

$('.products-grid .container:not(.over)').mouseenter(function() {
  usedMouse = true;
});*/

$('.products-grid .container:not(.over)').tap(function(e) {
  if (!!('ontouchstart' in window)/* && !usedMouse*/) {
    // location change if already hovered or tap target is button
    if ($(this).hasClass('over') || $(e.target).hasClass('button')) {
      $(this).addClass('detail'); // add detail - disable hover effect on actual container
      return true;
    }

    e.preventDefault();
    e.stopPropagation();

    $('.products-grid .container').removeClass('over'); // remove all over effects
    $(this).addClass('over'); // add over effect to actual container
    return false; // do nothing because script made over effect
  }
});

/*$('.products-grid .container:not(.over)').mouseleave(function() {
  usedMouse = false;
});*/

.products-grid {
  width: 100%;
  text-align: center;
}
.products-grid .row,
.std .products-grid .row {
  margin: 0 0 0 -22px;
  text-align: left;
}
.products-grid .row > .leftcolumn {
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 33.33%;
  margin: 0;
  padding: 0 0 0 22px;
}
.products-grid .row .product-image {
  overflow: hidden;
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  border: 1px solid #c9d5d8;
}
.products-grid .row .product-image img {
  display: block;
  width: 100% !important;
  height: auto !important;
  margin: 0;
}
.products-grid .clear,
.std .products-grid .clear {
  clear: both;
  margin: 0;
}
.products-grid .container {
  position: relative;
  margin: 0 0 50px;
}
.products-grid .options-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding-top: 5px;
}
.products-grid .parameters,
.products-grid .container.detail > .options-wrapper > .parameters,
.products-grid .container.detail:hover > .options-wrapper > .parameters {
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transition: all 250ms linear;
  -moz-transition: all 250ms linear;
  -ms-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  transition: all 250ms linear;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  margin-top: -5px;
  padding-top: 66px;
  background: #eff9ff;
}
.products-grid .container:hover > .options-wrapper > .parameters,
.products-grid .container.over > .options-wrapper > .parameters {
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  -ms-transform: translateX(0%);
  -o-transform: translateX(0%);
  transform: translateX(0%);
}
.products-grid .parameters .size-wrapper {
  height: auto;
  border-bottom: 0 none;
}
.products-grid .parameters span {
  overflow: hidden;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
  height: 33px;
  border-bottom: 1px solid #bdccd4;
  padding-left: 10px;
  white-space: nowrap;
  font-size: 13px;
  color: #5f727c;
  line-height: 30px;
}
.products-grid .name-box,
.std .products-grid .name-box {
  position: relative;
  margin: 0;
}
.products-grid h3,
.std .products-grid h3 {
  overflow: hidden;
  height: 42px;
  margin: 15px 12px 18px;
  white-space: normal;
  font-size: 18px;
  font-weight: 700;
  color: #000;
  line-height: 21px;
}
.products-grid h3 a {
  text-decoration: none;
  font-weight: bold;
  color: #000;
}
.products-grid h3 a:hover {
  text-decoration: none;
}
.products-grid .description {
  overflow: hidden;
  height: 40px;
  margin: 0 12px 11px;
  font-size: 14px;
  font-weight: 400;
  color: #81929c;
  line-height: 20px;
}
.products-grid .description p {
  margin: 0;
  padding: 0;
}
.price_wrapper,
.std .price_wrapper {
    margin: 0;
    border-top: 1px solid #bdccd4;
    border-bottom: 1px solid #bdccd4;
    padding: 9px 8px 10px;
}
.price_wrapper:after {
    content: ' ';
    clear: both;
    display: block;
}
.price_wrapper .addToCart {
  float: right;
}
.price_wrapper a.button {
  float: right;
  width: 136px;
  height: 39px;
  background-color: #a5c82d;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 39px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<div class="products-grid">
  <div class="row">
    <div class="leftcolumn">
      <div class="container">
        <a class="product-image" href="#">
          <img src="http://dummyimage.com/316x210/eee/333333.png" alt="product name" title="Product Name">
        </a>
        <div class="options-wrapper">
          <div class="parameters">
            <div class="size-wrapper">
              <span class="height">Height 95.2 cm</span>
              <span class="width">Width 210.5 cm</span>
              <span class="length">Length 187.5 cm</span>
              <span class="color"></span>
            </div>
          </div>

          <div class="name-box">
            <h3 class="product-name"><a href="#" title="Product Name">Product Name</a></h3>
          </div>

          <div class="description">Description</div>
        </div>
        <div class="price_wrapper">
          <a class="button" href="#">Detail</a>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

这个解决方案帮助我解决了我的问题(感谢@booboos):

    // mark as mobile clicked
    $('.products-grid .container:not(.over)').touchstart(function() {
        this.mobileClick = true;
    });

    // unmark mobile click
    $('.products-grid .container:not(.over)').touchmove(function() {
        this.mobileClick = false;
    });

    // if mobile click is unmarked - delete mark property
    $('.products-grid .container:not(.over)').touchend(function() {
        if (this.mobileClick === false)
            delete this.mobileClick;
    });

    // check if there was mobile click and create new behavior for screen taps
    $('.products-grid .container:not(.over)').tap(function(e) {

        if (typeof this.mobileClick === 'undefined')
            return true;

        e.preventDefault();

        if (this.mobileClick === true) {
            if ($(this).hasClass('over') || $(e.target).hasClass('button')) {
                $(this).addClass('detail'); // add detail - disable hover effect on actual container
                window.location.href = $(this).find('.button').attr('href');
            }

            $('.products-grid .container').removeClass('over'); // remove all over effects
            $(this).addClass('over'); // add over effect to actual container

            delete this.mobileClick;
        }
    });

1. touchstart 在触摸的容器元素上创建属性 mobileClick
2. touchmove 将禁用该属性
3. 如果之前有touchmove事件，touchend事件只是删除属性
4. 点击容器将检查元素上是否有事件的 mobileClick 属性，如果存在 - 脚本将首先将类“over”添加到容器元素，如果容器有 over 类，那么下次它会将用户重定向到 detail页。此事件最后还会删除 mobileClick 属性。所以我可以确定下一次触摸是真正的触摸。