HTML + IE6 + IE7 + IE8 + IE9, элемент unclickable - PullRequest
Новая
       0

HTML + IE6 + IE7 + IE8 + IE9, элемент unclickable

1 голос
/ 03 апреля 2011

У меня есть <div>Some text</div>, и я хочу сделать его unclickable (я хочу, чтобы элементы, которые под этим div были выбраны вместо этого div), unselectable (чтобы пользователь не мог ' Выделите текст внутри этого div), , но видимый ... возможно ли для IE6 + IE7 + IE8 + IE9?

Обновление

Я просто хочу визуализировать некоторый текст поверх изображения, но я хочу, чтобы картинка была единственной, кто может отлавливать события мыши ... поэтому я хочу, чтобы текст отображался, но вообще не участвовал в событиях мыши ...

Ответы [ 6 ]

3 голосов
/ 08 апреля 2011

Вы можете отключить ваш текст, установив невыбираемый атрибут <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/

3 голосов
/ 04 апреля 2011

Попробуйте наложить изображение и текст на другой 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>
2 голосов
/ 08 апреля 2011

Вот рабочий пример (по крайней мере, в Chrome и IE6, не могу говорить за IE7-9), использующий Raphael для визуализации текста сверху и немного jQuery Маршрут события соответственно.

gotta love marsupials!

(Должен любить сумчатых!)

Я был удивлен, обнаружив, что передача события click работает в VML в IE6! Кроме того, VML не может быть выбран по умолчанию, что в этом случае хорошо.

Начальная разметка просто <img alt="the text you want to show" />, так что это чистое улучшение JS.

Это в основном SVG-эквивалент решения на основе холста, предложенного @ Eldar.

1 голос
/ 07 апреля 2011

Вы можете использовать холст, чтобы поместить текст поверх изображения.Конечно, HTML5 не работает для IE6, но вы можете использовать библиотеку googles http://code.google.com/p/explorercanvas/ для эмуляции там.

1 голос
/ 04 апреля 2011

Не могли бы вы просто разместить четкое изображение сверху?

1 голос
/ 03 апреля 2011 
  var element = document.getElementById('content');
  element.onselectstart = function () { return false; } // ie
  element.onmousedown = function () { return false; } // mozilla

Попробуйте это

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...