Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

jquery - Mousedown and Click conflict on Firefox

0 votes
542 views
in Technique[技术] by (71.8m points)

jquery - Mousedown and Click conflict on Firefox

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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

57.0k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...