Firefox上的Mousedown和点击冲突 [英] Mousedown and Click conflict on Firefox

问题描述

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

基本上，效果在Firefox上无效。

这里是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 （）{};};}; 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>'）; //获取点击位置和大小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'）; //修复目标位置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 + ，'-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 ）;}，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;颜色：＃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;背景图像：-webkit梯度（线性，左上，左下，颜色停止（0，＃D2D2D2），颜色停止（0.5，＃E4E4E4），颜色停止（0.5，#EDEDED） （1，＃FFFFFF））; background-image：-webkit-linear-gradient（center top，＃D2D2D2 0％，＃E4E4E4 50％，#EDEDED 50％，#FFFFFF 100％）;背景图像：-moz-线性梯度（中心顶部，＃D2D2D2 0％，＃E4E4E4 50％，#EDEDED 50％，#FFFFFF 100％）。背景图像：-o-线性梯度（中心顶部，＃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;背景图像：-webkit梯度（线性，左上，左下，颜色停止（0，＃4488ee），颜色停止（0.5，＃5590ee），颜色停止（0.5，＃77a2ff） （1，＃88aaff））; background-image：-webkit-linear-gradient（center top，＃4488ee 0％，＃5590ee 50％，＃77a2ff 50％，＃88aaff 100％）;背景图像：-moz-线性梯度（中心顶部，＃4488ee 0％，＃5590ee 50％，＃77a2ff 50％，＃88aaff 100％）。背景图像：-o-线性梯度（中心顶部，＃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;背景图像：-webkit梯度（线性，左下，左上，颜色停止（0，＃4488ee），颜色停止（0.5，＃5590ee），颜色停止（0.5，＃77a2ff） （1，＃88aaff））;背景图像：-webkit-线性梯度（中心底部，＃4488ee 0％，＃5590ee 50％，＃77a2ff 50％，＃88aaff 100％）;背景图像：-moz-线性梯度（中心底部，＃4488ee 0％，＃5590ee 50％，＃77a2ff 50％，＃88aaff 100％）。背景图像：-o-线性梯度（中心底部，＃4488ee 0％，＃5590ee 50％，＃77a2ff 50％，＃88aaff 100％）。背景图像：-ms-线性梯度（中心底部，＃4488ee 0％，＃5590ee 50％，＃77a2ff 50％，＃88aaff 100％）;背景图像：线性梯度（至底部，＃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;过渡定时函数：立方贝塞尔（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; - 跃迁定时函数：立方贝赛尔（0.4,0,0.2,1）;}波纹纹影效应{transition：背景150ms立方贝赛尔（0.4,0,0.2,1），不透明度150ms立方贝塞尔（0.4,0,0.2,1）; -webkit-跃迁：背景150ms立方贝赛尔（0.4,0,0.2,1），不透明度150ms立方贝赛尔（0.4,0,0.2,1）; -moz-转变：背景150ms立方贝赛尔（0.4,0,0.2,1），不透明度150ms立方贝齐尔（0.4,0,0.2,1）; - 跃迁：背景150ms立方贝赛尔（0.4,0,0.2,1），不透明度150ms立方贝赛尔（0.4,0,0.2,1）;}。波纹。重要; -o-transition：none！important; -webkit-transition：none！important; transition：none！important;}  

  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（）; p>

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

'）;

默认点击事件如果我替换：

var supportEvent =（'ontouchstart'在窗口）？ 'touchstart'：'mousedown';

其中：

var supportEvent =（'ontouchstart'in window）？ 'touchstart'：'click';

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

您也可以在MAWButton的支持页面上发表评论 https://github.com/yuhua-chen/MAWButton/issues/21

解决方案

最后，这里是工作的演示<​​a href =http://jsfiddle.net/mwcqs77j /rel =nofollow> 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（）{} //当转换结束时的回调。 }，options）; return this.each（function（）{var $ this = $（this）; var supportEvent =（'ontouchstart'in window）？'touchstart'：'mousedown'; $ this.addClass（'ripple'）。on ，function（e）{//绑定触摸/点击事件e.stopPropagation（）; $ this.append（'< div class =ripple-effect>< / div>'）; //获取点击位置和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'）; ！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 settings.speed +'ms'，'-webkit-transition-duration'：settings.speed +'ms'，'-moz-transition-duration'：settings.speed +'ms' ：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 ）;}，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;颜色：＃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;背景图像：-webkit梯度（线性，左上，左下，颜色停止（0，＃D2D2D2），颜色停止（0.5，＃E4E4E4），颜色停止（0.5，#EDEDED） （1，#FFFFFF））; background-image：-webkit-linear-gradient（center top，＃D2D2D2 0％，＃E4E4E4 50％，#EDEDED 50％，#FFFFFF 100％）;背景图像：-moz-线性梯度（中心顶部，＃D2D2D2 0％，＃E4E4E4 50％，#EDEDED 50％，#FFFFFF 100％）。背景图像：-o-线性梯度（中心顶部，＃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;背景图像：-webkit梯度（线性，左上，左下，颜色停止（0，＃4488ee），颜色停止（0.5，＃5590ee），颜色停止（0.5，＃77a2ff） （1，＃88aaff））; background-image：-webkit-linear-gradient（center top，＃4488ee 0％，＃5590ee 50％，＃77a2ff 50％，＃88aaff 100％）;背景图像：-moz-线性梯度（中心顶部，＃4488ee 0％，＃5590ee 50％，＃77a2ff 50％，＃88aaff 100％）;背景图像：-o-线性梯度（中心顶部，＃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;背景图像：-webkit梯度（线性，左下，左上，颜色停止（0，＃4488ee），颜色停止（0.5，＃5590ee），颜色停止（0.5，＃77a2ff） （1，＃88aaff））;背景图像：-webkit-线性梯度（中心底部，＃4488ee 0％，＃5590ee 50％，＃77a2ff 50％，＃88aaff 100％）;背景图像：-moz-线性梯度（中心底部，＃4488ee 0％，＃5590ee 50％，＃77a2ff 50％，＃88aaff 100％）。背景图像：-o-线性梯度（中心底部，＃4488ee 0％，＃5590ee 50％，＃77a2ff 50％，＃88aaff 100％）。背景图像：-ms-线性梯度（中心底部，＃4488ee 0％，＃5590ee 50％，＃77a2ff 50％，＃88aaff 100％）;背景图像：线性梯度（至底部，＃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;过渡定时函数：立方贝塞尔（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）;}。 pointer-events：none！important;过渡：背景150ms立方贝赛尔（0.4,0,0.2,1），不透明度150ms立方贝赛尔（0.4,0,0.2,1）; -webkit-过渡：背景150ms立方贝赛尔（0.4,0,0.2,1），不透明度150ms立方贝赛尔（0.4,0,0.2,1）; -moz-转变：背景150ms立方贝赛尔（0.4,0,0.2,1），不透明度150ms立方贝齐尔（0.4,0,0.2,1）; - 跃迁：背景150ms立方贝赛尔（0.4,0,0.2,1），不透明度150ms立方贝赛尔（0.4,0,0.2,1）;}。波纹。 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>  

我已经添加了指针事件：无对孩子divs和它工作。

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

解决方案

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.

这篇关于Firefox上的Mousedown和点击冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！