如何在单击或点击时获取 jQuery 以运行相同的功能答案

【问题标题】：how to get jQuery on click or tap to both run the same function如何在单击或点击时获取 jQuery 以运行相同的功能
【发布时间】：2018-05-09 00:18:31
【问题描述】：

我试图让这个 jQuery 监听器点击或点击运行一个函数。目前它在点击时工作正常，但目前不想在移动设备上点击时运行涟漪效应？

有没有更好的替代 '.on('click tap')' 或者我只是使用不正确，如果是，我做错了什么？

下面是带有波纹效果的按钮的代码。

$( '.hvr-ripple-out' ).click(function() {
  $(this).toggleClass( 'fill' );
});


$( '.hvr-ripple-out' ).on( 'click tap', function() {
  var el = $(this),
    newone = el.clone(true);
  el.before(newone);
  el.remove();
  newone.addClass( 'fill' );
});

.hvr-ripple-out {
  margin: 5px;
  width: 20px;
  height: 20px;
  padding: 10px;
  color: #333;
  text-align: center;
  border: 1px solid #333;
  border-radius: 50%;
}

.hvr-ripple-out:hover {
  color: #39CCCC;
  border-color: #39CCCC;
}


@-webkit-keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}

@keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}

.hvr-ripple-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

.hvr-ripple-out:before {
  content: '';
  position: absolute;
  border: rgba(0, 0, 0, 0.0) solid 2px;
  border-radius: 50%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.hvr-ripple-out:hover:before,
.hvr-ripple-out:focus:before,
.hvr-ripple-out:active:before {
  -webkit-animation-name: hvr-ripple-out;
  animation-name: hvr-ripple-out;
  border-color: #39CCCC;
  animation-fill-mode: forwards;
}

.fill {
  background-color: #39CCCC;
  color: #fff;
  border: 1px solid #fff;
}

.fill:hover {
  color: #fff;
  border: 1px solid #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

<div style="padding: 100px; float: left;">
  <a class="hvr-ripple-out"><i class="fas fa-check"></i></a>
</div>

【问题讨论】：

我认为移动设备仍在传播点击事件？
@Doug，也许我只是做错了什么，但它对我不起作用

标签： jquery html css

【解决方案1】：

如果你想要支持移动设备的功能，你需要实现jquery mobile：

jQuery mobile 支持点击事件。

将此代码添加到您的页面。它正在链接 JQuery 移动 JavaScript 文件。

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

【讨论】：