跨越标签内的onclick事件

时间:2012-05-02 11:32:23

标签: html css html5 css3

示例代码

<a href="page" style="text-decoration:none;display:block;">
    <span onclick="hide()">Hide me</span>
</a>

由于 a 标记已超出范围,因此无法单击该标记。我尝试 z-index 但是没有用

6 个答案:

答案 0 :(得分:40)

<a href="http://the.url.com/page.html">
    <span onclick="hide(); return false">Hide me</span>
</a>

这是最简单的解决方案。

答案 1 :(得分:11)

当您点击hide me时,会触发 a span 点击。由于页面正在重定向到另一个页面,因此您无法看到hide()

的工作情况

您可以看到此内容以获得更多说明

http://jsfiddle.net/jzn82/

答案 2 :(得分:2)

找到答案。

我已经使用了一些风格来实现这个目标。

node -v
v5.9.1

npm --version
3.7.3

gulp -v
Requiring external module babel-register
CLI version 1.2.1
Local version 3.9.0

https://jsfiddle.net/mafais/bys46d5w/

答案 3 :(得分:0)

使用 onmouseup

尝试这样的事情

        <html>
        <head>
        <script type="text/javascript">
        function hide(){
        document.getElementById('span_hide').style.display="none";
        }
        </script>
        </head>

        <body>
        <a href="page" style="text-decoration:none;display:block;">
        <span   onmouseup="hide()" id="span_hide">Hide me</span>
        </a>
        </body>
        </html>

编辑:

          <html>
        <head>
        <script type="text/javascript">
        $(document).ready(function(){
         $("a").click(function () { 
         $(this).fadeTo("fast", .5).removeAttr("href"); 
        });
        });
        function hide(){
        document.getElementById('span_hide').style.display="none";
        }
        </script>
        </head>

        <body>
        <a href="page.html" style="text-decoration:none;display:block;" onclick="return false" >
        <span   onmouseup="hide()" id="span_hide">Hide me</span>
        </a>
        </body>
        </html>

答案 4 :(得分:-1)

我会使用jQuery来获得您正在寻找的结果。此时您不需要使用锚标记,但如果您这样做,它将如下所示:

<a href="page" style="text-decoration:none;display:block;">

<span onclick="hide()">Hide me</span>

</a>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.min.js' /
<script type='text/javascript'>
$(document).ready(function(){
     $('span').click(function(){
           $(this).hide();
     }
}

答案 5 :(得分:-2)

你可以使用jQuery

http://jsfiddle.net/Bdqv7/