Firefox 上的 Mousedown 和 Click 冲突

【问题标题】：Mousedown and Click conflict on FirefoxFirefox 上的 Mousedown 和 Click 冲突
【发布时间】：2015-02-05 18:17:41
【问题描述】：

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

基本上，效果在 Firefox 上不起作用。

这里是演示 -> http://jsfiddle.net/2txszd46/4/

//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();
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;
}
<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>

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

$('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

【问题讨论】：

    标签： jquery click material-design mousedown ripple


    【解决方案1】：

    根据 MA​​WButton 的作者，如果我将效果更改为 ，效果会很好，并且如果您单击按钮边缘的左上角，它会在按钮上发生单击事件，这是工作中的 Fiddle 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 相关的问题。我还在想办法。

    【讨论】：

      【解决方案2】：

      最后，这里是工作 Demo http://jsfiddle.net/mwcqs77j/

      //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();
      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;
}
      <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>

      我在子 div 中添加了 pointer-events: none 并且它起作用了。

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-08-29
        • 2011-11-12
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode