javascript - 如何使imagePreview不可点击

Question

我使用一个简单的 imagePreview 脚本来预览更大尺寸的图像，但它使用了一个。作为全尺寸来源，

我怎样才能改变它，使链接不可点击， 我试过更换一个。与跨度。但随后未加载预览。

在 jsfiddle 中查看: http://jsfiddle.net/7FLbU/

HTML代码:

<div class="image"><a href="https://www.google.com/images/srpr/logo11w.png" class="preview"><img src="https://www.google.com/images/srpr/logo11w.png"/></a></div>

Javascript:

this.imagePreview = function(){ 
        xOffset = 10;
        yOffset = 30;
    $("a.preview").hover(function(e){
        $("body").append("<p id='preview'><img src='"+ this.href +"'/></p>");                                
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");                        
    },
    function(){
        $("#preview").remove();
    }); 
    $("a.preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });         
};
$(document).ready(function(){
    imagePreview();
});

CSS:

.image {
float: left;
padding: 0px 10px 10px 0px;
}

.image img {
max-width: 240px;
max-height: 290px;
}

#preview{
position:absolute;
border:1px solid #0096B8;
background:#0096B8;
padding:5px;
display:none;
color:#fff;
max-width:500px;
border-radius: 4px;
}

#preview img {
max-width:500px;
}

Answer 1

使用 event.preventDefault() 来防止浏览器对按钮点击的默认操作

$('a.preview').click(function(e){
    e.preventDefault();
})

文档: http://api.jquery.com/event.preventdefault/

或者使用return false;

$('a.preview').click(function(e){
    return false;
})

Fiddle Demo