Question

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

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

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

当前的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;
        }
    });

touchstart创建属性mobileClick on触及的容器元素
touchmove将禁用该属性
touchend事件如果在
点击容器将检查元素上是否有活动的mobileClick属性，如果它在那里 - 脚本将首先添加类＆＃34; over＆＃34;到容器元素，如果容器有类，那么下次它会将用户重定向到详细页面。此事件还会在最后删除mobileClick属性。所以我可以肯定，下次触摸真的是触摸。

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

1 个答案: