Closed xjh22222228 closed 6 years ago
复现代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片预览</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no, minimum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link href="https://cdn.bootcss.com/mui/3.4.0/css/mui.min.css" rel="stylesheet"> <style> *{margin:0;padding:0}img{width:100%}.mui-preview-image.mui-fullscreen{position:fixed;z-index:20;background-color:#000}.mui-preview-footer,.mui-preview-header{position:absolute;width:100%;left:0;z-index:10}.mui-preview-header{height:44px;top:0}.mui-preview-footer{height:50px;bottom:0}.mui-preview-header .mui-preview-indicator{display:block;line-height:25px;color:#fff;text-align:center;margin:15px auto 4;width:70px;background-color:rgba(0,0,0,.4);border-radius:12px;font-size:16px}.mui-preview-image{display:none;-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.mui-preview-image.mui-preview-in{-webkit-animation-name:fadeIn;animation-name:fadeIn}.mui-preview-image.mui-preview-out{background:0 0;-webkit-animation-name:fadeOut;animation-name:fadeOut}.mui-preview-image.mui-preview-out .mui-preview-footer,.mui-preview-image.mui-preview-out .mui-preview-header{display:none}.mui-zoom-scroller{position:absolute;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;left:0;right:0;bottom:0;top:0;width:100%;height:100%;margin:0;-webkit-backface-visibility:hidden}.mui-zoom{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.mui-slider .mui-slider-group .mui-slider-item img{width:auto;height:auto;max-width:100%;max-height:100%}.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img{width:100%}.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item{display:inline-table}.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img{display:table-cell;vertical-align:middle}.mui-preview-loading{position:absolute;width:100%;height:100%;top:0;left:0;display:none}.mui-preview-loading.mui-active{display:block}.mui-preview-loading .mui-spinner-white{position:absolute;top:50%;left:50%;margin-left:-25px;margin-top:-25px;height:50px;width:50px}.mui-preview-image img.mui-transitioning{-webkit-transition:-webkit-transform .5s ease,opacity .5s ease;transition:transform .5s ease,opacity .5s ease}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.mui-content p img{max-width:100%;height:auto} </style> </head> <body> <div class="mui-content"> <img src="https://xjh22222228.github.io/demo/demo01-previewimage/images/2.jpg" data-preview-src="" data-preview-group="1" draggable="false"> </div> <a href="http://www.baidu.com">baidu</a> <script src="https://cdn.bootcss.com/mui/3.4.0/js/mui.min.js"></script> <script src="https://xjh22222228.github.io/demo/demo01-previewimage/js/mui.zoom.js"></script> <script src="https://xjh22222228.github.io/demo/demo01-previewimage/js/mui.previewimage.js"></script> <script> mui.previewImage(); </script> </body> </html>
这下好了, a链接无法跳转
你好,这问题你可以这样修复: mui.previewimage.js中proto.initEvent 方法的监听事件从‘tap’替换为‘click’,如下操作
$(document.body).on('click', 'img[data-preview-src]', function() { self.open(this); return false; });
复现代码:
这下好了, a链接无法跳转