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

Question

我试图让这个 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>

Answer 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>