1. 技术文章
  2. Mousedown and Click conflict on Firefox

Mousedown and Click conflict on Firefox

由 六眼飞鱼酱① 提交于 2019-12-25 15:17:32

问题


I try to simulate the Paper Ripple Effect by using MAWButton plugin (https://github.com/yuhua-chen/MAWButton) and JQuery Color plugin (https://github.com/jquery/jquery-color) .

Basically, the effect did not work on Firefox.

Here is the Demo -> 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>

The Ripple Effect was triggered by:

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

As you can see, the default click event which trigger:

alert('clicked');

did not work on Firefox.

The default click event worked fine if I replace:

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

with:

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

However, mousedown event seems to be the correct way to simulate mouse button click.

You can also comment on the support page of MAWButton https://github.com/yuhua-chen/MAWButton/issues/21


回答1:


According to the author of MAWButton, the Effect worked fine if I changed the to , and it has click event on the button if you click on left top of the button's edge, here is the working 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>

Thus, this is the problem related to Firefox. I am still figuring it out.




回答2:


Finally, here is the working 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>

I have added pointer-events: none to the children divs and it worked.



来源：https://stackoverflow.com/questions/27352128/mousedown-and-click-conflict-on-firefox

标签
jquery
click
material-design
mousedown
ripple
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!