Firefox上的Mousedown和Click冲突

Question

我尝试使用MAWButton插件（ https://github.com/yuhua-chen/MAWButton）和JQuery Color插件（ https://github.com/jquery/jquery-color）来模拟Paper Ripple效果。

基本上，效果不适用于Firefox。

这是演示 - ＆gt; http://jsfiddle.net/2txszd46/4/

＆＃13;

＆＃13;

//https://github.com/yuhua-chen/MAWButton/blob/master/js/mawbutton.js
(function($) {

  $.fn.ripple = function(options) {
    var settings = $.extend({
      speed: 333, // ms
      transitionEnd: function() {} // callback when transition ends.
    }, options);

    return this.each(function() {
      var $this = $(this);
      var supportEvent = ('ontouchstart' in window) ? 'touchstart' : 'mousedown';
      $this.addClass('ripple')
        .on(supportEvent, function(e) { //bind touch/click event
          $this.append('<div class="ripple-effect"></div>');
          // Fetch click position and size
          var posX = $this.offset().left,
            posY = $this.offset().top;
          var w = $this.outerWidth(),
            h = $this.outerHeight();
          var d = Math.max(w, h) * 2;
          var targetX = e.pageX - posX;
          var targetY = e.pageY - posY;
          var backColor = $this.css('color');

          //Fix target position
          if (!targetX || !targetY) {
            targetX = e.originalEvent.touches[0].pageX - posX;
            targetY = e.originalEvent.touches[0].pageY - posY;
          }

          var ratio = 0.5;

          var $effectElem = $this.children(':last');

          //Animate Start
          $effectElem.addClass('ripple-stop').css({
            'top': targetY,
            'left': targetX,
            'width': d,
            'height': d,
            'margin-left': -d * ratio,
            'margin-top': -d * ratio,
            'background-color': $.Color(backColor).alpha(0.333).toRgbaString(),
            'transition-duration': settings.speed + 'ms',
            '-webkit-transition-duration': settings.speed + 'ms',
            '-moz-transition-duration': settings.speed + 'ms',
            '-o-transition-duration': settings.speed + 'ms'
          });
          $effectElem.removeClass('ripple-stop');

          //Animate End
          setTimeout(function() {
            $effectElem.addClass('ripple-effect-out').css({
              'background-color': $.Color(backColor).alpha(0).toRgbaString(),
              'transition-duration': settings.speed + 'ms',
              '-webkit-transition-duration': settings.speed + 'ms',
              '-moz-transition-duration': settings.speed + 'ms',
              '-o-transition-duration': settings.speed + 'ms'
            });
            setTimeout(function() {
              $this.find('.ripple-effect').first().remove();
              settings.transitionEnd.call(this);
            }, settings.speed);
          }, settings.speed);
        });
    });
  }
}(jQuery));
$('a.button').ripple();

＆＃13;

a.button {
  display: inline-block;
  padding: 6px 12px;
  margin: 2px;
  line-height: 30px;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -o-border-radius: 6px;
  -moz-border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  text-decoration: none;
  font-family: Roboto, sans-serif;
  font-size: 12px;
  color: #000;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.09);
  text-decoration: none !important;
  cursor: pointer;
  outline: none;
  background-color: #D2D2D2;
  border-color: #D2D2D2;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #D2D2D2), color-stop(0.5, #E4E4E4), color-stop(0.5, #EDEDED), color-stop(1, #FFFFFF));
  background-image: -webkit-linear-gradient(center top, #D2D2D2 0%, #E4E4E4 50%, #EDEDED 50%, #FFFFFF 100%);
  background-image: -moz-linear-gradient(center top, #D2D2D2 0%, #E4E4E4 50%, #EDEDED 50%, #FFFFFF 100%);
  background-image: -o-linear-gradient(center top, #D2D2D2 0%, #E4E4E4 50%, #EDEDED 50%, #FFFFFF 100%);
  background-image: -ms-linear-gradient(center top, #D2D2D2 0%, #E4E4E4 50%, #EDEDED 50%, #FFFFFF 100%);
  background-image: linear-gradient(to top, #D2D2D2 0%, #E4E4E4 50%, #EDEDED 50%, #FFFFFF 100%);
}
a.button:hover {
  background-color: #4488ee;
  border-color: #4488ee;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4488ee), color-stop(0.5, #5590ee), color-stop(0.5, #77a2ff), color-stop(1, #88aaff));
  background-image: -webkit-linear-gradient(center top, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  background-image: -moz-linear-gradient(center top, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  background-image: -o-linear-gradient(center top, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  background-image: -ms-linear-gradient(center top, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  background-image: linear-gradient(to top, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  color: #FFF;
}
a.button:active {
  background-color: #4488ee;
  border-color: #4488ee;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #4488ee), color-stop(0.5, #5590ee), color-stop(0.5, #77a2ff), color-stop(1, #88aaff));
  background-image: -webkit-linear-gradient(center bottom, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  background-image: -moz-linear-gradient(center bottom, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  background-image: -o-linear-gradient(center bottom, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  background-image: -ms-linear-gradient(center bottom, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  background-image: linear-gradient(to bottom, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  color: #FFF;
}
.ripple {
  overflow: hidden;
  position: relative !important;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}
.ripple .ripple-effect {
  position: absolute !important;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -o-border-radius: 100%;
  -moz-border-radius: 100%;
  width: 0px;
  height: 0px;
  float: left;
  transition-property: border-radius, width, height, background, margin-left, margin-top;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-property: border-radius, width, height, background, margin-left, margin-top;
  -webkit-transition-duration: 150ms;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition-property: border-radius, width, height, background, margin-left, margin-top;
  -moz-transition-duration: 150ms;
  -moz-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition-property: border-radius, width, height, background, margin-left, margin-top;
  -o-transition-duration: 150ms;
  -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ripple .ripple-effect-out {
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ripple .ripple-stop {
  -moz-transition: none !important;
  -o-transition: none !important;
  -webkit-transition: none !important;
  transition: none !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
<a href="javascript:alert('clicked');" class="button">RIPPLE BUTTON</a>

＆＃13;

＆＃13;

＆＃13;

涟漪效应由以下因素触发：

$('a.button').ripple();

如您所见，触发的默认点击事件：

alert('clicked');

无法在Firefox上运行。

如果我替换了

，则默认点击事件正常

var supportEvent = ('ontouchstart' in window ) ? 'touchstart':'mousedown';

使用：

var supportEvent = ('ontouchstart' in window ) ? 'touchstart':'click';

但是，mousedown事件似乎是模拟鼠标按钮单击的正确方法。

您也可以在MAWButton https://github.com/yuhua-chen/MAWButton/issues/21

的支持页面上发表评论

Answer 1

根据MAWButton的作者，如果我改变了to，效果很好，如果你点击按钮边缘的左上角，按钮上有点击事件，这是工作小提琴http://jsfiddle.net/2txszd46/8/。

//https://github.com/yuhua-chen/MAWButton/blob/master/js/mawbutton.js
(function($) {

  $.fn.ripple = function(options) {
    var settings = $.extend({
      speed: 333, // ms
      transitionEnd: function() {} // callback when transition ends.
    }, options);

    return this.each(function() {
      var $this = $(this);
      var supportEvent = ('ontouchstart' in window) ? 'touchstart' : 'mousedown';
      $this.addClass('ripple')
        .on(supportEvent, function(e) { //bind touch/click event
          $this.append('<div class="ripple-effect"></div>');
          // Fetch click position and size
          var posX = $this.offset().left,
            posY = $this.offset().top;
          var w = $this.outerWidth(),
            h = $this.outerHeight();
          var d = Math.max(w, h) * 2;
          var targetX = e.pageX - posX;
          var targetY = e.pageY - posY;
          var backColor = $this.css('color');

          //Fix target position
          if (!targetX || !targetY) {
            targetX = e.originalEvent.touches[0].pageX - posX;
            targetY = e.originalEvent.touches[0].pageY - posY;
          }

          var ratio = 0.5;

          var $effectElem = $this.children(':last');

          //Animate Start
          $effectElem.addClass('ripple-stop').css({
            'top': targetY,
            'left': targetX,
            'width': d,
            'height': d,
            'margin-left': -d * ratio,
            'margin-top': -d * ratio,
            'background-color': $.Color(backColor).alpha(0.333).toRgbaString(),
            'transition-duration': settings.speed + 'ms',
            '-webkit-transition-duration': settings.speed + 'ms',
            '-moz-transition-duration': settings.speed + 'ms',
            '-o-transition-duration': settings.speed + 'ms'
          });
          $effectElem.removeClass('ripple-stop');

          //Animate End
          setTimeout(function() {
            $effectElem.addClass('ripple-effect-out').css({
              'background-color': $.Color(backColor).alpha(0).toRgbaString(),
              'transition-duration': settings.speed + 'ms',
              '-webkit-transition-duration': settings.speed + 'ms',
              '-moz-transition-duration': settings.speed + 'ms',
              '-o-transition-duration': settings.speed + 'ms'
            });
            setTimeout(function() {
              $this.find('.ripple-effect').first().remove();
              settings.transitionEnd.call(this);
            }, settings.speed);
          }, settings.speed);
        });
    });
  }
}(jQuery));
$('button').ripple();
$('button').on('click', function() {
  alert('clicked');
});

button {
  display: inline-block;
  padding: 6px 12px;
  margin: 2px;
  line-height: 30px;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -o-border-radius: 6px;
  -moz-border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  text-decoration: none;
  font-family: Roboto, sans-serif;
  font-size: 12px;
  color: #000;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.09);
  text-decoration: none !important;
  cursor: pointer;
  outline: none;
  background-color: #D2D2D2;
  border-color: #D2D2D2;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #D2D2D2), color-stop(0.5, #E4E4E4), color-stop(0.5, #EDEDED), color-stop(1, #FFFFFF));
  background-image: -webkit-linear-gradient(center top, #D2D2D2 0%, #E4E4E4 50%, #EDEDED 50%, #FFFFFF 100%);
  background-image: -moz-linear-gradient(center top, #D2D2D2 0%, #E4E4E4 50%, #EDEDED 50%, #FFFFFF 100%);
  background-image: -o-linear-gradient(center top, #D2D2D2 0%, #E4E4E4 50%, #EDEDED 50%, #FFFFFF 100%);
  background-image: -ms-linear-gradient(center top, #D2D2D2 0%, #E4E4E4 50%, #EDEDED 50%, #FFFFFF 100%);
  background-image: linear-gradient(to top, #D2D2D2 0%, #E4E4E4 50%, #EDEDED 50%, #FFFFFF 100%);
}
button:hover {
  background-color: #4488ee;
  border-color: #4488ee;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4488ee), color-stop(0.5, #5590ee), color-stop(0.5, #77a2ff), color-stop(1, #88aaff));
  background-image: -webkit-linear-gradient(center top, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  background-image: -moz-linear-gradient(center top, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  background-image: -o-linear-gradient(center top, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  background-image: -ms-linear-gradient(center top, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  background-image: linear-gradient(to top, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  color: #FFF;
}
button:active {
  background-color: #4488ee;
  border-color: #4488ee;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #4488ee), color-stop(0.5, #5590ee), color-stop(0.5, #77a2ff), color-stop(1, #88aaff));
  background-image: -webkit-linear-gradient(center bottom, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  background-image: -moz-linear-gradient(center bottom, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  background-image: -o-linear-gradient(center bottom, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  background-image: -ms-linear-gradient(center bottom, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  background-image: linear-gradient(to bottom, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  color: #FFF;
}
.ripple {
  overflow: hidden;
  position: relative !important;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}
.ripple .ripple-effect {
  position: absolute !important;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -o-border-radius: 100%;
  -moz-border-radius: 100%;
  width: 0px;
  height: 0px;
  float: left;
  transition-property: border-radius, width, height, background, margin-left, margin-top;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-property: border-radius, width, height, background, margin-left, margin-top;
  -webkit-transition-duration: 150ms;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition-property: border-radius, width, height, background, margin-left, margin-top;
  -moz-transition-duration: 150ms;
  -moz-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition-property: border-radius, width, height, background, margin-left, margin-top;
  -o-transition-duration: 150ms;
  -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ripple .ripple-effect-out {
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ripple .ripple-stop {
  -moz-transition: none !important;
  -o-transition: none !important;
  -webkit-transition: none !important;
  transition: none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
<button>RIPPLE BUTTON</button>

因此，这是与Firefox相关的问题。我还在搞清楚。

Answer 2

最后，这是工作演示http://jsfiddle.net/mwcqs77j/

＆＃13;

＆＃13;

//https://github.com/yuhua-chen/MAWButton/blob/master/js/mawbutton.js
(function($) {
  $.fn.ripple = function(options) {
    var settings = $.extend({
      speed: 333, // ms
      alpha: 0.333,
      transitionEnd: function() {} // callback when transition ends.
    }, options);

    return this.each(function() {
      var $this = $(this);
      var supportEvent = ('ontouchstart' in window) ? 'touchstart' : 'mousedown';
      $this.addClass('ripple').on(supportEvent, function(e) { //bind touch/click event
        e.stopPropagation();
        $this.append('<div class="ripple-effect"></div>');
        // Fetch click position and size
        var posX = $this.offset().left,
          posY = $this.offset().top;
        var w = $this.outerWidth(),
          h = $this.outerHeight();
        var d = Math.max(w, h) * 2;
        var targetX = e.pageX - posX;
        var targetY = e.pageY - posY;
        var backColor = $this.css('color');

        //Fix target position
        if (!targetX || !targetY) {
          targetX = e.originalEvent.touches[0].pageX - posX;
          targetY = e.originalEvent.touches[0].pageY - posY;
        }

        var ratio = 0.5;
        var $effectElem = $this.children(':last');

        //Animate Start
        $effectElem.addClass('ripple-stop').css({
          'top': targetY,
          'left': targetX,
          'width': d,
          'height': d,
          'margin-left': -d * ratio,
          'margin-top': -d * ratio,
          'background-color': $.Color(backColor).alpha(settings.alpha).toRgbaString(),
          'transition-duration': settings.speed + 'ms',
          '-webkit-transition-duration': settings.speed + 'ms',
          '-moz-transition-duration': settings.speed + 'ms',
          '-o-transition-duration': settings.speed + 'ms'
        }).removeClass('ripple-stop');

        //Animate End
        setTimeout(function() {
          $effectElem.addClass('ripple-effect-out').css({
            'background-color': $.Color(backColor).alpha(0).toRgbaString(),
            'transition-duration': settings.speed + 'ms',
            '-webkit-transition-duration': settings.speed + 'ms',
            '-moz-transition-duration': settings.speed + 'ms',
            '-o-transition-duration': settings.speed + 'ms'
          });
          setTimeout(function() {
            $this.find('.ripple-effect').first().remove();
            settings.transitionEnd.call(this);
          }, settings.speed);
        }, settings.speed);
      });
    });
  }
}(jQuery));
$('a.button').ripple();

＆＃13;

a.button {
  display: inline-block;
  padding: 6px 12px;
  margin: 2px;
  line-height: 30px;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -o-border-radius: 6px;
  -moz-border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  text-decoration: none;
  font-family: Roboto, sans-serif;
  font-size: 12px;
  color: #000;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.09);
  text-decoration: none !important;
  cursor: pointer;
  outline: none;
  background-color: #D2D2D2;
  border-color: #D2D2D2;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #D2D2D2), color-stop(0.5, #E4E4E4), color-stop(0.5, #EDEDED), color-stop(1, #FFFFFF));
  background-image: -webkit-linear-gradient(center top, #D2D2D2 0%, #E4E4E4 50%, #EDEDED 50%, #FFFFFF 100%);
  background-image: -moz-linear-gradient(center top, #D2D2D2 0%, #E4E4E4 50%, #EDEDED 50%, #FFFFFF 100%);
  background-image: -o-linear-gradient(center top, #D2D2D2 0%, #E4E4E4 50%, #EDEDED 50%, #FFFFFF 100%);
  background-image: -ms-linear-gradient(center top, #D2D2D2 0%, #E4E4E4 50%, #EDEDED 50%, #FFFFFF 100%);
  background-image: linear-gradient(to top, #D2D2D2 0%, #E4E4E4 50%, #EDEDED 50%, #FFFFFF 100%);
}
a.button:hover {
  background-color: #4488ee;
  border-color: #4488ee;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4488ee), color-stop(0.5, #5590ee), color-stop(0.5, #77a2ff), color-stop(1, #88aaff));
  background-image: -webkit-linear-gradient(center top, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  background-image: -moz-linear-gradient(center top, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  background-image: -o-linear-gradient(center top, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  background-image: -ms-linear-gradient(center top, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  background-image: linear-gradient(to top, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  color: #FFF;
}
a.button:active {
  background-color: #4488ee;
  border-color: #4488ee;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #4488ee), color-stop(0.5, #5590ee), color-stop(0.5, #77a2ff), color-stop(1, #88aaff));
  background-image: -webkit-linear-gradient(center bottom, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  background-image: -moz-linear-gradient(center bottom, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  background-image: -o-linear-gradient(center bottom, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  background-image: -ms-linear-gradient(center bottom, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  background-image: linear-gradient(to bottom, #4488ee 0%, #5590ee 50%, #77a2ff 50%, #88aaff 100%);
  color: #FFF;
}
.ripple {
  overflow: hidden;
  position: relative !important;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}
.ripple .ripple-effect {
  position: absolute !important;
  pointer-events: none !important;
  position: absolute !important;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -o-border-radius: 100%;
  -moz-border-radius: 100%;
  width: 0px;
  height: 0px;
  float: left;
  transition-property: border-radius, width, height, background, margin-left, margin-top;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-property: border-radius, width, height, background, margin-left, margin-top;
  -webkit-transition-duration: 150ms;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition-property: border-radius, width, height, background, margin-left, margin-top;
  -moz-transition-duration: 150ms;
  -moz-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition-property: border-radius, width, height, background, margin-left, margin-top;
  -o-transition-duration: 150ms;
  -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ripple .ripple-effect-out {
  position: absolute !important;
  pointer-events: none !important;
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ripple .ripple-stop {
  position: absolute !important;
  pointer-events: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -webkit-transition: none !important;
  transition: none !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
<a href="javascript:alert('clicked');" class="button">RIPPLE BUTTON</a>

＆＃13;

＆＃13;

＆＃13;

我在子div中添加了指针事件：无，并且有效。