Javascript 更改：鼠标悬停可在移动/触摸设备不工作的情况下单击/点击功能

因此，我正在尝试使用Modernizer的

无触摸

/

触摸

类将

：hover

函数更改为单击函数，用于页面上的特定元素（标题）。从理论上讲，这应该是可行的，但它在移动/触摸设备上只能点击一次，这意味着如果我再次点击它，它不会“取消悬停”。我可以通过点击页面上的另一个元素来“取消悬停”，但我非常希望当再次点击时标题消失

如果我更改js，使其成为必须单击的

禁止触摸

设备，它工作正常。我错过了什么

小提琴：

至少可以说，我的js技能很差（阅读：不存在），我一直在使用另一篇文章中的一个片段：

其余的都有效，所以这只是一件事。非常感谢您的帮助

Javascript:

// For hovering becoming click via Modernizr
//$('body').hasClass('no-touch') ? event = 'mouseenter mouseleave' : event = 'click';
!$('body').hasClass('no-touch') ? event = 'mouseenter mouseleave' : event = 'click';

$('.design-section figure').on(event, function () {
$(this).toggleClass('open');
});

<section id="work" class="content-section text-left" data-offset="100px">
<div class="design-section">
    <div class="container">
        <div class="col-lg-8 col-lg-offset-2">
            <img src="http://cutepuppyclub.com/wp-content/uploads/2015/05/White-Cute-Puppy-.jpg" width="100%" class="img-responsive" alt="Playing the dilemma game">
            <figure>
                <figcaption>
                    <p>test text</p>
                </figcaption>
            </figure>
       </div>
    </div>
</div>
</section>

figure {
    padding: 0;
    margin-top: 0;
    position: relative;
    display: block;
    overflow: hidden;
}

figcaption {
    position: absolute;
    background: rgba(0,0,0,.3);
    color: #fff;
}

figure.open figcaption {
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter: alpha(opacity=100);
    opacity: 1;
}

.design-section figcaption {
  opacity: 0;
  bottom: -30%; 
  left: 0;
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -o-transition:      all 0.6s ease;
  padding: 0;
  width:100%;
  display:block;
}

.design-section figure {
    height:120px;
    margin-top:-120px;
    z-index:1;
}

.design-section img {
    padding-top:0;
    margin-top:14px;
    z-index:0;
}

.design-section figcaption p {
    margin:0;
    padding: 1.5% 2.5%;
    font-size:15px;
}

.design-section figure.open figcaption{
    bottom: 0;
}

HTML:

// For hovering becoming click via Modernizr
//$('body').hasClass('no-touch') ? event = 'mouseenter mouseleave' : event = 'click';
!$('body').hasClass('no-touch') ? event = 'mouseenter mouseleave' : event = 'click';

$('.design-section figure').on(event, function () {
$(this).toggleClass('open');
});

<section id="work" class="content-section text-left" data-offset="100px">
<div class="design-section">
    <div class="container">
        <div class="col-lg-8 col-lg-offset-2">
            <img src="http://cutepuppyclub.com/wp-content/uploads/2015/05/White-Cute-Puppy-.jpg" width="100%" class="img-responsive" alt="Playing the dilemma game">
            <figure>
                <figcaption>
                    <p>test text</p>
                </figcaption>
            </figure>
       </div>
    </div>
</div>
</section>

figure {
    padding: 0;
    margin-top: 0;
    position: relative;
    display: block;
    overflow: hidden;
}

figcaption {
    position: absolute;
    background: rgba(0,0,0,.3);
    color: #fff;
}

figure.open figcaption {
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter: alpha(opacity=100);
    opacity: 1;
}

.design-section figcaption {
  opacity: 0;
  bottom: -30%; 
  left: 0;
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -o-transition:      all 0.6s ease;
  padding: 0;
  width:100%;
  display:block;
}

.design-section figure {
    height:120px;
    margin-top:-120px;
    z-index:1;
}

.design-section img {
    padding-top:0;
    margin-top:14px;
    z-index:0;
}

.design-section figcaption p {
    margin:0;
    padding: 1.5% 2.5%;
    font-size:15px;
}

.design-section figure.open figcaption{
    bottom: 0;
}

---

另外，我使用的是Bootstrap，但在这件事上没有什么可说的。

您不需要使用Modernizer来检查触摸事件，您可以这样做：

---

另外，您使用的

条件（三元）运算符

是错误的，我修复了它。阅读。

您可以将多个事件指定为参数，因此只需包含touchstart，即可在用户单击手机时添加操作

$('.design-section figure').on('mouseover mouseout touchstart', function () {
    $(this).toggleClass('open');
});

---

非常感谢你！但是，我发现现在的

：hover

功能是在非触摸设备上单击（即使我将

非触摸

更改为

触摸

）。当我在我的桌面浏览器上测试它时，我现在必须单击以查看效果，即使

no touch

类处于启用状态。当

不触摸

类时，是否可以同时获得

：悬停

功能和

触摸

类时的单击功能？太神奇了，这就像一个魔咒！非常感谢你@loulyshas您不应该忘记这不是最好的解决方案-当用户有鼠标和触摸屏时，情况会怎样？这将是糟糕的UX。谢谢你的评论！我很清楚这并不理想，但这是我能想到的最好的解决方案；它应该可以在大多数设备上运行（单击或悬停）（稍后我会在不同的设备上运行一些UX测试，但我最初的观察是，这将是最好的解决方案，尽管并不理想）。正如本文所述，这可能会导致误报。