Javascript HTML+；IE6&x2B；IE7&x2B；IE8&x2B；IE9，不可拾取的div元素_Javascript_Html_Css_Internet Explorer

Javascript HTML+；IE6&x2B；IE7&x2B；IE8&x2B；IE9，不可拾取的div元素

javascript html css internet-explorer

Javascript HTML+；IE6&x2B；IE7&x2B；IE8&x2B；IE9，不可拾取的div元素,javascript,html,css,internet-explorer,Javascript,Html,Css,Internet Explorer,我有一些文本，我想让它不可读（我想选择该div下的元素而不是该div），不可选择（因此用户无法选择该div内的文本），但可见IE6+IE7+IE8+IE9有可能吗？更新我只想在图片上渲染一些文本，但我希望图片是唯一能够捕捉鼠标事件的人。。所以我希望文本被呈现，但根本不涉及鼠标事件 var element = document.getElementById('content'); element.onselectstart = function () { return false; }

我有

一些文本

，我想让它不可读（我想选择该div下的元素而不是该div），不可选择（因此用户无法选择该div内的文本），但可见IE6+IE7+IE8+IE9有可能吗？

更新

我只想在图片上渲染一些文本，但我希望图片是唯一能够捕捉鼠标事件的人。。所以我希望文本被呈现，但根本不涉及鼠标事件

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

试试这个

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

试着用另一个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>


函数捕获单击（事件）{
警报（“capurebox”）；
}
.imgbox{
位置：绝对位置；
顶部：0px；
左：0px；
}
.imgbox img{
宽度：200px；
高度：200px；
}
.imgbox p{
游标：默认值；
位置：绝对位置；
顶部：50px；
左：50px；
}
.capturebox{
过滤器：alpha（不透明度=0）；
背景色：白色；
高度：200px；
宽度：200px；
位置：绝对位置；
左：0px；
右：0px；
}
一些文本

尝试用另一个div（在我的示例中名为

capturebox

）覆盖图像和文本，并在该div上捕获鼠标事件

为了让

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>


函数捕获单击（事件）{
警报（“capurebox”）；
}
.imgbox{
位置：绝对位置；
顶部：0px；
左：0px；
}
.imgbox img{
宽度：200px；
高度：200px；
}
.imgbox p{
游标：默认值；
位置：绝对位置；
顶部：50px；
左：50px；
}
.capturebox{
过滤器：alpha（不透明度=0）；
背景色：白色；
高度：200px；
宽度：200px；
位置：绝对位置；
左：0px；
右：0px；
}
一些文本

您可以使用画布将文本放在图像的顶部。当然HTML5不适用于IE6，但您可以使用谷歌库在那里进行模拟。

您可以使用画布将文本放在图像的顶部。当然HTML5不适用于IE6，但你可以使用谷歌库来模拟它。

这里有一个（至少在Chrome和IE6中，不能代表IE7-9）用于在顶部呈现文本，还有一个小jQuery用于适当地路由事件

（一定喜欢有袋动物！）

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

起始标记只是

，因此它是一个纯JS增强

这基本上是基于SVG的解决方案，相当于@Eldar提出的基于画布的解决方案。

这里有一个（至少在Chrome和IE6中，不能代表IE7-9）用于在顶部呈现文本，还有一个用于适当路由事件的jQuery

（一定喜欢有袋动物！）

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

起始标记只是

，因此它是一个纯JS增强

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

您可以通过设置不可选择属性

并设置CSS属性

-moz user select:none来禁用文本
假设您的文本位于
中，您可以在单击p时触发对图像的单击
$("p").click(function() {
    $(this).parent().find('img').trigger('click')
});

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

检查中的工作示例您可以通过设置不可选择属性
并设置CSS属性-moz user select:none来禁用文本
假设您的文本位于
中，您可以在单击p时触发对图像的单击
$("p").click(function() {
    $(this).parent().find('img').trigger('click')
});

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

检查工作示例是否要阻止用户复制您的内容？不。@Ai那个DIV是绝对定位的吗？不是sreal，我只是想在图片上方呈现一些文本，但希望图片是唯一可以捕捉鼠标事件的人。。因此，我希望文本被呈现，但不涉及鼠标事件。@sime vidas。。是..如果您将文本作为image div的子级，绝对定位在顶部，那么如果您没有捕捉到它们，事件将向上传播到image div。问题。是否要阻止用户复制您的内容？不。@Ai那个DIV是绝对定位的吗？不是sreal，我只是想在图片上方呈现一些文本，但希望图片是唯一可以捕捉鼠标事件的人。。因此，我希望文本被呈现，但不涉及鼠标事件。@sime vidas。。是..如果您将文本作为image div的子级，则绝对