HTML + IE6 + IE7 + IE8 + IE9，不可点击的div元素

Question

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

更新资料

我只想在图片上方渲染一些文本，但是我希望图片是唯一可以捕获鼠标事件的图片。所以我希望渲染文本，但完全不涉及鼠标事件。

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

您可以通过设置unselectable属性<p unselectable="on">并设置CSS属性-moz-user-select: none;来禁用文本-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

这是一个有效的示例（至少在Chrome和IE6中不能代表IE7-9），该示例使用Raphael在顶部显示文本，并使用一些jQuery适当地路由事件。

要爱有袋动物！

（一定要爱有袋动物！）

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

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

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

Answer 4

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

尝试这个

Answer 5

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

Answer 6

您可以使用画布在图像上方放置文本。 当然HTML5不适用于IE6，但是您可以使用http://code.google.com/p/explorercanvas/ googles库在此处进行仿真。

HTML + IE6 + IE7 + IE8 + IE9，不可点击的div元素

问题描述

6 个解决方案

解决方案1
3 2011-04-03 21:20:25

解决方案2
3 已采纳 2011-04-08 05:55:34

在http://jsfiddle.net/pavgY/1/上查看工作示例

解决方案3
2 2011-04-07 22:45:11

解决方案4
1 2011-04-03 19:28:38

解决方案5
1 2011-04-03 21:00:40

解决方案6
1 2011-04-07 09:54:27

HTML + IE6 + IE7 + IE8 + IE9，不可点击的div元素

问题描述

6 个解决方案

解决方案1 3 2011-04-03 21:20:25

解决方案2 3 已采纳 2011-04-08 05:55:34

在http://jsfiddle.net/pavgY/1/上查看工作示例

解决方案3 2 2011-04-07 22:45:11

解决方案4 1 2011-04-03 19:28:38

解决方案5 1 2011-04-03 21:00:40

解决方案6 1 2011-04-07 09:54:27

解决方案1
3 2011-04-03 21:20:25

解决方案2
3 已采纳 2011-04-08 05:55:34

解决方案3
2 2011-04-07 22:45:11

解决方案4
1 2011-04-03 19:28:38

解决方案5
1 2011-04-03 21:00:40

解决方案6
1 2011-04-07 09:54:27