CodePen

HTML

            
              <div>
<h2>The Issue<h2>
<a href="#0" class="link link-1" data-data="something">
  <svg viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
	  <path id="shape-twitter" d="M100.001,17.942c-3.681,1.688-7.633,2.826-11.783,3.339
	c4.236-2.624,7.49-6.779,9.021-11.73c-3.965,2.432-8.354,4.193-13.026,5.146C80.47,10.575,75.138,8,69.234,8
	c-11.33,0-20.518,9.494-20.518,21.205c0,1.662,0.183,3.281,0.533,4.833c-17.052-0.884-32.168-9.326-42.288-22.155
	c-1.767,3.133-2.778,6.773-2.778,10.659c0,7.357,3.622,13.849,9.127,17.65c-3.363-0.109-6.525-1.064-9.293-2.651
	c-0.002,0.089-0.002,0.178-0.002,0.268c0,10.272,7.072,18.845,16.458,20.793c-1.721,0.484-3.534,0.744-5.405,0.744
	c-1.322,0-2.606-0.134-3.859-0.379c2.609,8.424,10.187,14.555,19.166,14.726c-7.021,5.688-15.867,9.077-25.48,9.077
	c-1.656,0-3.289-0.102-4.895-0.297C9.08,88.491,19.865,92,31.449,92c37.737,0,58.374-32.312,58.374-60.336
	c0-0.92-0.02-1.834-0.059-2.743C93.771,25.929,97.251,22.195,100.001,17.942L100.001,17.942z"/>
  </svg>
</a>
</div>

<div>
<h2>Fixed with a CSS Cover<h2>
<a href="#0" class="link link-2" data-data="something">
  <svg viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
	  <path id="shape-twitter" d="M100.001,17.942c-3.681,1.688-7.633,2.826-11.783,3.339
	c4.236-2.624,7.49-6.779,9.021-11.73c-3.965,2.432-8.354,4.193-13.026,5.146C80.47,10.575,75.138,8,69.234,8
	c-11.33,0-20.518,9.494-20.518,21.205c0,1.662,0.183,3.281,0.533,4.833c-17.052-0.884-32.168-9.326-42.288-22.155
	c-1.767,3.133-2.778,6.773-2.778,10.659c0,7.357,3.622,13.849,9.127,17.65c-3.363-0.109-6.525-1.064-9.293-2.651
	c-0.002,0.089-0.002,0.178-0.002,0.268c0,10.272,7.072,18.845,16.458,20.793c-1.721,0.484-3.534,0.744-5.405,0.744
	c-1.322,0-2.606-0.134-3.859-0.379c2.609,8.424,10.187,14.555,19.166,14.726c-7.021,5.688-15.867,9.077-25.48,9.077
	c-1.656,0-3.289-0.102-4.895-0.297C9.08,88.491,19.865,92,31.449,92c37.737,0,58.374-32.312,58.374-60.336
	c0-0.92-0.02-1.834-0.059-2.743C93.771,25.929,97.251,22.195,100.001,17.942L100.001,17.942z"/>
  </svg>
</a>
</div>
  
<div>
<h2>Fixed with pointer-events<h2>
<a href="#0" class="link link-3" data-data="something">
  <svg viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
	  <path id="shape-twitter" d="M100.001,17.942c-3.681,1.688-7.633,2.826-11.783,3.339
	c4.236-2.624,7.49-6.779,9.021-11.73c-3.965,2.432-8.354,4.193-13.026,5.146C80.47,10.575,75.138,8,69.234,8
	c-11.33,0-20.518,9.494-20.518,21.205c0,1.662,0.183,3.281,0.533,4.833c-17.052-0.884-32.168-9.326-42.288-22.155
	c-1.767,3.133-2.778,6.773-2.778,10.659c0,7.357,3.622,13.849,9.127,17.65c-3.363-0.109-6.525-1.064-9.293-2.651
	c-0.002,0.089-0.002,0.178-0.002,0.268c0,10.272,7.072,18.845,16.458,20.793c-1.721,0.484-3.534,0.744-5.405,0.744
	c-1.322,0-2.606-0.134-3.859-0.379c2.609,8.424,10.187,14.555,19.166,14.726c-7.021,5.688-15.867,9.077-25.48,9.077
	c-1.656,0-3.289-0.102-4.895-0.297C9.08,88.491,19.865,92,31.449,92c37.737,0,58.374-32.312,58.374-60.336
	c0-0.92-0.02-1.834-0.059-2.743C93.771,25.929,97.251,22.195,100.001,17.942L100.001,17.942z"/>
  </svg>
</a>
</div>
            
          
!

CSS

            
              .link {
  border: 10px solid black;
  display: inline-block;
  svg {
    width: 100px;
    height: 100px;
    display: block;
    background: yellow;
    fill: #55ACEE;
  }
}

.link-2 {
  position: relative;
  &::after {
    content: "cover";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(red, 0.4);
    color: white;
  }
}

.link-3 {
  svg {
    pointer-events: none;
  }
}

* {
  box-sizing: border-box;
}
body {
  > div {
    width: 33%;
    padding: 20px;
    float: left;
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $("a").on("click", function(event) {
  
  // `this` is always <a>
  // console.log(this)
  
  // event.target though, could be <a>, <svg>, or <path>
  // console.log(event.target)
  
});


// Sometimes you don't have a `this` though
$(document).on("click", "a.link", doSomething);

// Non-jQuery
document.addEventListener('click', doThing);

function doThing(event) {
  var el;
  
  // we can check the tag type, and if it's not the <a>, move up.
  if (event.target.tagType == "path") {
    el = event.target.parentElement.parentElement;
  } else if (event.target.tagType == "svg") {
    el = event.target.parentElement;
  } else {
    el = event.target;
  }
  console.log(el.getAttribute("data-data"));
}


function doSomething(event) {
  
  // We still have access to `this` here
  
  // But still could be issues with event.target...
  // console.log(event.target);
  
  // But what if we for sure want the <a>, because, for example, we need a data-attribute on it.
  var el;
  
  // we can check the tag type, and if it's not the <a>, move up.
  if (event.target.tagType != "A") {
    el = $(event.target).closest("a");
  } else {
    el = $(event.target);
  }
  console.log(el.data("data"));
  
  // or we can handle it in CSS...
  
}
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................