Link not working on icon in a element

问题

I'm trying to put some links in a <summary> element, and if the <a> tag doesn't contain anything but an icon <i>, it's not working (a click on it just opens the <details> element…).

My code:

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
  <details>
    <summary>
      <span>Foo</span>
      <span><a href="http://www.google.com">text link</a></span>
      <span><a href="http://www.google.com"><i class="material-icons">send</i></a></span>
    </summary>
    <span>Bar</span>
  </details>
</body>

</html>

Anybody would know what am I missing?

I tried with other icons than the Material ones without results…

Edit: It's a Chrome bug (it's working with Firefox): anybody knows a workaround?

回答1:

If I'm not mistaken your problem is when you click on <i> element it opens <details> instead of going to your link. If you write <a> inside <i> then it works.

Notice For some reasons it don't redirect from code snippet in SO. But when I copy this peace of code in a html file and test it, it works fine in chrome either.

    <!doctype html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    </head>
    
    <body>
      <details>
        <summary>
          <span>Foo</span>
          <span><a href="http://www.google.com">text link</a></span>
          <span><i class="material-icons"><a href="http://www.google.com" style="text-decoration:none;">send</a></i></span>
        </summary>
        <span>Bar</span>
      </details>
    </body>
    
    </html>

回答2:

Here's my workaround:

summary a * {
  pointer-events: none;
}

This makes clicks dispatch directly on the link instead of the inner elements

回答3:

/* if you want to let open the window of the summary */
    $("#id2").click(function(){
    	    window.open("http://www.google.com");
    		setTimeout(function() { /* because open attribute is added after event detection */
    			$("#id").removeAttr("open");
    		}, 0);
    	});
    /* if you want the same thing as <a> tag */
$("#id2").click(function(){
            $("#id").hide();
    	    window.location = "http://www.google.com";
    	});

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
  <details id="id">
    <summary>
      <span>Foo</span>
      <span><a href="http://www.google.com">text link</a></span>
      <span id="id2"><a href="http://www.google.com"><i class="material-icons">send</i></a></span>
    </summary>
    <span id="content">Bar</span>
  </details>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
  </body>

</html>

来源：https://stackoverflow.com/questions/48538675/link-not-working-on-icon-in-a-summary-element

标签

html

google-chrome

Link not working on icon in a <summary> element

问题

回答1:

回答2:

回答3: