CODEWITHSUNDEEP
css
igogra
igogra

Reputation: 465

Disable parent link (anchor) using css

I have an anchor and a H1 with a span. When I click the span I show an alert, but the link is also opened and I don't want this happens, I only want to show the alert. Is there any way to do this with CSS (I can't not use jQuery for that)? Maybe z-index?. This is the code:

<!DOCTYPE html>
<html lang="en">

<head>
    ...
    <style>
    h1 {
        background-color: green;
    }

    span {
        font-size: 12px;
        color: white;
        margin-left: 15px;
    }
    </style>
</head>

<body>
    <a href="https://stackoverflow.com/" target="_blank">
        <h1>Title <span>Some text</span></h1>
    </a>
    <script>
    $("span").click(function() {
        alert("The span was clicked");
    });
    </script>
</body>

</html>

Here the fiddle: https://jsfiddle.net/b820m6uj/

Upvotes: 0

Views: 978

Answers (3)

zer00ne
zer00ne

Reputation: 43880

If you are already using jQuery change the span selector to a pass the event object and add event.preventDefault() within your block. See Demo 1.

Here's a way to use CSS but you need to change 2 things in HTML.

  1. Ad an id to your <span> or <h1> (ex. <span id='tgt'>...`)
  2. Next, change <a>nchor target to the id of the <span> (ex. <a href="whatever.com" target='tgt'>...`)
  3. Last but not least, add this ruleset to your CSS: 
    #tgt:target {display:inline}

The pseudoclass is :target which when applied, as demonstrated above, will enable whatever ruleset on the selector it's assigned to when an <a>nchor is clicked (with all the preparations previously explained of course.) I assigned display:inline because span#tgt already is inline making the <a>nchor truly disabled and almost completely worthless yet clickable. See Demo 2. BTW added a second example in Demo 2 with JavaScript and it still functions fine.

Demo 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  ...
  <style>
    h1 {
      background-color: green;
    }
    
    span {
      font-size: 12px;
      color: white;
      margin-left: 15px;
    }
  </style>
</head>

<body>
  <a href="https://stackoverflow.com/" target="_blank">
    <h1>Title <span>Some text</span></h1>
  </a>
  <script>
    $("a").click(function(event) {
      event.preventDefault();
      alert("The span was clicked");
    });
  </script>
</body>

</html>

Demo 2

document.getElementById('tgt2').addEventListener('click', function(e) {
  /* Once again this would be the best solution */
  // e.preventDefault()
  alert("Hey JavaScript/jQuery works still!")
}, false);
#tgt1:target {
  display: inline
}

#tgt2:target {
  display: inline
}
<!DOCTYPE html>
<html lang="en">

<head>

  <style>
    h1 {
      background-color: green;
    }
    
    span {
      font-size: 12px;
      color: white;
      margin-left: 15px;
    }
  </style>
</head>

<body>
  <a href="https://stackoverflow.com/" target="tgt1">
    <h1 id='tgt1'>Title <span>:target with CSS only</span></h1>
  </a>
  <hr/>
  <a href="https://stackoverflow.com/" target="tgt2">
    <h1 id='tgt2'>Title <span>:target with JS alert()</span></h1>
  </a>

</body>

</html>

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53674

You can attach a click handler to the a then test the e.target and see if it was the span, and if so, show the alert and use e.preventDefault() to disable the link.

$("a").on('click', function(e) {
	span = $(this).find('h1 span')[0];
	if (e.target == span) {
		e.preventDefault();
		alert("The span was clicked.");
	}
});
h1 {
  background-color: green;
}

span {
  font-size: 12px;
  color: white;
  margin-left: 15px;
  position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://stackoverflow.com/">
  <h1>Title <span>Some text</span></h1>
</a>

Upvotes: 0

Yevgeny
Yevgeny

Reputation: 81

IF you can't use jQuery, you can use vanilla javascript:

<!DOCTYPE html>
<html lang="en">

<head>
  ...
  <style>
    h1 {
      background-color: green;
    }
    
    span {
      font-size: 12px;
      color: white;
      margin-left: 15px;
    }
  </style>
</head>

<body>
  <a href="https://stackoverflow.com/" target="_blank">
    <h1>Title <span>Some text</span></h1>
  </a>
  <script>
    document.querySelectorAll('a').forEach(function (link) {
      link.addEventListener('click', function (event) {
        event.preventDefault();
        alert("The span was clicked");
      });
    });
  </script>
</body>

</html>

Upvotes: 1

Related Questions