发表新帖
发表新帖

How do I make a link unclickable?

前端 未结
关注
11 666
伪装坚强ぢ
伪装坚强ぢ 2020-12-08 19:37

Is there some CSS property or something that I can use with my anchor tag so as to make it unclickable or I HAVE to do stuff in code behind to get what I want?

相关标签:
11条回答
  • 没有蜡笔的小新
    2020-12-08 20:11

    including an onclick="return false" attribute on the anchor element does the trick. While this solution uses javascript and not css

    0 讨论(0)
  • 我在风中等你
    2020-12-08 20:16

    If you want to use CSS :

    .x{
		pointer-events: none;
	}
    <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<a href="https://www.google.com" class="x" />Unclickable Google Link</a>
<br>
<a href="https://www.google.com" class="" />Clickable Google Link</a>
</body>
</html>

    0 讨论(0)
  • 爱一瞬间的悲伤
    2020-12-08 20:17 
    <a href="abcd.html" onclick="return false;">abcd</a>
    0 讨论(0)
  • 感动是毒
    2020-12-08 20:21

    The pointer-events CSS property can be set in modern browsers on a particular graphic element and tells under what circumstances the element can become the target of pointer events.

    The none value makes sure that the element is never the target of pointer events and prevents all click, state and cursor options on the element.

    a {
  display: inline-block;
  pointer-events: none;
}
    <a href="http://stackoverflow.com" onclick="alert('clicked on link')">
  <svg width="140" height="140" onclick="alert('clicked on svg')">
    <rect x="10" y="10" width="120" height="120" stroke="#42858C" stroke-width="10" fill="#3E4E50" />
  </svg>
</a>

    However, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases. - MDN

    a {
  display: inline-block;
  pointer-events: none;
}
a svg {
    pointer-events: fill;
}
    <a href="http://stackoverflow.com" onclick="alert('clicked on link')">
  <svg width="140" height="140" onclick="alert('clicked on svg')">
    <rect x="10" y="10" width="120" height="120" stroke="#42858C" stroke-width="10" fill="#3E4E50" />
  </svg>
</a>

    0 讨论(0)
  • 谎友^
    2020-12-08 20:23

    Place a block style="position:absolute" right before the anchor tag and size it to overlay the content. Not sure why you want to make it unclickable most people are wondering how to make the links in a layered html clickable http://wsmithdesign.wordpress.com/2010/10/20/layering-html-with-absolute-positions-in-fluid-html/

    0 讨论(0)
  • 遇见更好的自我
    2020-12-08 20:24

    This pretty works for me. Add a class of disable to your a tag. and this code snippet to your css

    a.disable {
pointer-events: none;
cursor: default;
}
    0 讨论(0)
 看不清?
提交回复
热议问题