Question

我有<div>Some text</div>，我想让它无法点击（我希望选择该div下的元素而不是此div），不可选择（因此用户无法选择此div内的文字，但可见 ... 是否可以使用IE6 + IE7 + IE8 + IE9？

更新

我只是想在图片上面渲染一些文字，但我希望图片是唯一可以捕捉鼠标事件的图片。所以我想要渲染文本，但根本不涉及鼠标事件.. < / p>

Answer 1

尝试使用另一个div（在我的示例中名为capturebox）覆盖图像和文本，并在其上捕获鼠标事件。

为了让capturebox真正捕获IE中的事件，它必须具有背景颜色集。为了使它透明，我给它一个0的不透明度：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script>
            function captureclick(event) {
                alert('capurebox');
            }
        </script>
        <style>
            .imgbox {
                position: absolute;
                top: 0px;
                left: 0px;
            }

            .imgbox img {
                width: 200px;
                height: 200px;
            }

            .imgbox p {
                cursor: default;
                position: absolute;
                top: 50px;
                left: 50px;
            }

            .capturebox {
                filter: alpha(opacity=0);
                background-color: white;
                height: 200px;
                width: 200px;
                position: absolute;
                left: 0px;
                right: 0px;
            }

        </style>
    </head>
    <body>
        <div class="imgbox">
            <img src="yourimage.jpg"/>
            <p>Some text</p>
            <div class="capturebox" onclick="captureclick(event)"></div>
        </div>
    </body>
</html>

Answer 2

您可以通过设置无法选择的属性<p unselectable="on">并设置CSS属性-moz-user-select: none;

来停用文字

假设您的文字在<p>内，您可以在点击p时触发对图片的点击。

$("p").click(function() {
    $(this).parent().find('img').trigger('click')
});

$('img').click(function() {
    alert('image clicked');
})

检查http://jsfiddle.net/pavgY/1/

处的工作示例

Answer 3

这是working example（至少在Chrome和IE6中，不能代表IE7-9），使用Raphael将文本呈现在顶部，并使用一个小jQuery来适当地路由事件。

gotta love marsupials!

（喜欢有袋动物！）

我很惊讶地发现点击事件传递在IE6中的VML中起作用了！此外，默认情况下不能选择VML，在这种情况下很好。

起始标记只是<img alt="the text you want to show" />，所以它是纯粹的JS增强。

这基本上是基于SVG的等效于@Eldar提出的基于画布的解决方案。

Answer 4

  var element = document.getElementById('content');
  element.onselectstart = function () { return false; } // ie
  element.onmousedown = function () { return false; } // mozilla

试试这个

Answer 5

你能在上面放一个清晰的图像吗？

Answer 6

您可以使用画布将文字放在图像顶部。当然HTML5不适用于IE 6，但你可以使用http://code.google.com/p/explorercanvas/ googles库在那里模拟它。

HTML + IE6 + IE7 + IE8 + IE9，无法点击的div元素

6 个答案:

检查http://jsfiddle.net/pavgY/1/