如何使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;
})

小提琴演示

Answer 2

您可以使用跨度，但是跨度没有href属性。 改为访问href -attribute（在这种情况下，您可以选择任何属性名称）：

$(this).attr('href');

http://jsfiddle.net/7FLbU/5/

Answer 3

试试这个，这里有一些代码，

<div class="image"><a href="#" 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).find('img').attr('src') +"'/></p>");                              
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");    
        e.preventDefault();
    },
    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();
});

http://jsfiddle.net/7FLbU/8/