Используйте CSS, чтобы сделать интервал не кликабельным - PullRequest
Новая
       2

Используйте CSS, чтобы сделать интервал не кликабельным

49 голосов
/ 29 июня 2010 
<html>
    <head>
    </head>
    <body>
        <div>
            <a href="http://www.google.com">
                <span>title<br></span>
                <span>description<br></span>
                <span>some url</span>
            </a>
        </div>
    </body>
</html>

Я довольно новичок в CSS, у меня есть простой случай, подобный приведенному выше. Я хотел бы сделать клики по названию и некоторому URL, но хочу, чтобы описание было не кликабельным. Есть ли способ сделать это, применив некоторый CSS к диапазону, чтобы внутри этого диапазона не было кликабельности. Мое ограничение заключается в том, что я не хочу изменять структуру div, вместо этого, просто применяя css, можем ли мы создать диапазон, который находится внутри тега привязки, не кликабельный?

Ответы [ 7 ]

248 голосов
/ 12 сентября 2011

На самом деле, вы можете достичь этого с помощью CSS.Существует почти неизвестное правило css с именем pointer-events.Элемент a будет по-прежнему активен, но ваш диапазон описания не будет. 

a span.description {
    pointer-events: none;
}

Существуют и другие значения, такие как: все, обводка, закрашены и т. Д.

ref: http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/

ОБНОВЛЕНИЕ: С 2016 года все браузеры теперь принимают его: http://caniuse.com/#search=pointer-events

1 голос
/ 29 июня 2010

Не с CSS. Вы можете легко сделать это с помощью JavaScript, отменив обработку событий по умолчанию для этих элементов. В jQuery: 

$('a span:nth-child(2)').click(function(event) { event.preventDefault(); });
0 голосов
/ 01 июля 2016

Да, вы можете .... Вы можете поместить что-нибудь поверх элемента ссылки. 

<!DOCTYPE html>
<html>
<head>
    <title>Yes you CAN</title>
    <style type="text/css">
        ul{
            width: 500px;
            border: 5px solid black; 
        }
        .product-type-simple {
            position: relative;
            height: 150px;
            width: 150px;
        }
        .product-type-simple:before{
            position: absolute;
            height: 100% ;
            width: 100% ;
            content: '';
            background: green;//for debugging purposes , remove this if you want to see whats behind
            z-index: 999999999999;
        }
    </style>
</head>
<body>
<ul>
    <li class='product-type-simple'>
        <a href="/link1">
            <img src="http://placehold.it/150x150">
        </a>
    </li>
    <li class='product-type-simple'>
        <a href="/link2">
            <img src="http://placehold.it/150x150">
        </a>
    </li>
</ul>
</body>
</html>

волшебный соус происходит в тип продукта простой: до класса Здесь происходит то, что для каждого элемента, который имеет класс product-type-simple, вы создаете что-то , ширина и высота которого равна ширине product-type-simple, затем вы увеличиваете его z-индекс чтобы быть уверенным, что он будет размещен над содержимым простого типа продукта. Вы можете переключить цвет фона, если хотите увидеть, что происходит.

вот пример кода https://jsfiddle.net/92qky63j/

0 голосов
/ 30 июня 2010

В ответ на бессмысленную разглагольствование против jQuery, решения Vanilla JavaScript (TM) (протестировано на FF и IE):

Поместите это в тег script после загрузки разметки (непосредственно перед закрытием тега body), и вы получите эффект, аналогичный примеру jQuery. 

a = document.getElementsByTagName('a');
for (var i = 0; i < a.length;i++) {
  a[i].getElementsByTagName('span')[1].onclick = function() { return false;};
}

Это отключит щелчок на каждом втором пролете внутри тега. Вы также можете проверить innerHTML каждого диапазона на «описание» или установить атрибут или класс и проверить это.

0 голосов
/ 29 июня 2010

Используя CSS вы не можете, CSS изменит только внешний вид пролета.Однако вы можете сделать это, не изменяя структуру div, добавив обработчик onclick в span: 

<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
  <span>title<br></span>
  <span onclick='return false;'>description<br></span>
  <span>some url</span>
</a>
</div>
</body>
</html>

Затем вы можете стилизовать его так, чтобы он тоже выглядел не кликабельным:

0 голосов
/ 29 июня 2010

CSS относится к визуальному стилю, а не к поведению, поэтому на самом деле нет ответа.

Однако вы можете либо использовать javascript для изменения поведения, либо изменить стиль рассматриваемого диапазона, чтобы у него не было заостренного пальца, подчеркивания и т. Д. При его стилизации все равно оставалось бы кликабельное.

Еще лучше, измените разметку так, чтобы она отражала то, что вы хотите, чтобы она делала.

0 голосов
/ 29 июня 2010

CSS используется для применения стиля , то есть визуальных аспектов интерфейса.

То, что нажатие на элемент привязки приводит к выполнению действия, является аспектом поведения интерфейса, а не аспектом стилистическим .

Вы не можете достичь того, чего хотите, используя только CSS.

JavaScript используется для применения поведения к интерфейсу. Вы можете использовать JavaScript для изменения поведения ссылки.

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

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

...