search

dcloudio / mui

最接近原生APP体验的高性能框架
https://dev.dcloud.net.cn/mui/
MIT License
13.48k stars 6.57k forks source link

图片预览a链接默认事件被阻止？ #368

Closed xjh22222228 closed 6 years ago

xjh22222228 commented 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链接无法跳转

nearwmy commented 6 years ago

你好，这问题你可以这样修复： mui.previewimage.js中proto.initEvent 方法的监听事件从‘tap’替换为‘click’，如下操作

$(document.body).on('click', 'img[data-preview-src]', function() {
    self.open(this);
    return false;
});