Firefox上的Mousedown和Click冲突
我尝试使用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(''); // 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; }
RIPPLE BUTTON
涟漪效应由以下因素触发：
$('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
根据MAWButton的作者，如果我改变了效果，效果很好，如果点击按钮边缘的左上角，按钮上有点击事件，这里是工作小提琴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(''); // 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; }
最后，这是工作演示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(''); // 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; }
RIPPLE BUTTON