title: Mousedown and Click conflict on Firefox
body: <p>I try to simulate the Paper Ripple Effect by using MAWButton plugin (<a href="https://github.com/yuhua-chen/MAWButton" rel="nofollow"><a href="https://github.com/yuhua-chen/MAWButton" rel="nofollow">https://github.com/yuhua-chen/MAWButton</a></a>) and JQuery Color plugin (<a href="https://github.com/jquery/jquery-color" rel="nofollow"><a href="https://github.com/jquery/jquery-color" rel="nofollow">https://github.com/jquery/jquery-color</a></a>) . </p>
  
  <p>Basically, the effect did not work on Firefox.</p>
  
  <p>Here is the Demo -> <a href="http://jsfiddle.net/2txszd46/4/" rel="nofollow"><a href="http://jsfiddle.net/2txszd46/4/" rel="nofollow">http://jsfiddle.net/2txszd46/4/</a></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//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('&lt;div class="ripple-effect"&gt;&lt;/div&gt;');
            // 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();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"&gt;&lt;/script&gt;
  &lt;a href="javascript:alert('clicked');" class="button"&gt;RIPPLE BUTTON&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The Ripple Effect was triggered by:</p>
  
  <p><code>$('a.button').ripple();</code></p>
  
  <p>As you can see, the default click event which trigger:</p>
  
  <p><code>alert('clicked');</code></p>
  
  <p>did not work on Firefox.</p>
  
  <p>The default click event worked fine if I replace:</p>
  
  <p><code>var supportEvent = ('ontouchstart' in window ) ? 'touchstart':'mousedown';</code></p>
  
  <p>with:</p>
  
  <p><code>var supportEvent = ('ontouchstart' in window ) ? 'touchstart':'click';</code></p>
  
  <p>However, mousedown event seems to be the correct way to simulate mouse button click.</p>
  
  <p>You can also comment on the support page of MAWButton <a href="https://github.com/yuhua-chen/MAWButton/issues/21" rel="nofollow"><a href="https://github.com/yuhua-chen/MAWButton/issues/21" rel="nofollow">https://github.com/yuhua-chen/MAWButton/issues/21</a></a></p>