How to pass css :active pseudo class to javascript?

Question

Reference: Comments posted by @AnkithAmtange

Given html

<div>Click Away</div>

css

div {
  width: 200px;
  height: 200px;
  background: orange;
}
div:active {
  color: white;
  background: rebeccapurple;
}

jsfiddle https://jsfiddle.net/u3uhq9m1/

How to pass the currently :active pseudo class DOM element to javascript?

First attempt. Note, jQuery is not a requirement.

$(document).ready(function() {
  var active;
  $("div").click(function() {
    active = $(":active");
    setTimeout(function() {
      console.log("active", active)
    }, 1000)
  }) 
})

https://jsfiddle.net/u3uhq9m1/1/

Dekel · Accepted Answer · 2016-10-12 01:34:26Z

8

You can use the document.activeElement for that.

$(function() {
  $(document).on('click', function() {
    console.log(document.activeElement);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">asdf</div>
<span>123</span>
<select>
  <option>1</option>
</select>
<button>123</button>
<input />

Update

If you want to pass the current :active element - you must use the mousedown (and not the click event), because the :active element is not active anymore once your mouse is up.

Since the :active bubbles up the DOM tree, all the parent elements will also get the :active pseudo-class (added a red border in the following example) so I took only the last element in the $(':active') selector.

Check this example:

$(document).ready(function() {
  var active;
  $(document).mousedown(function() {
    active = $(":active");
    setTimeout(function() {
      console.log("active", active.last()[0])
    }, 1000)
  })
})

div {
  width: 100px;
  height: 100px;
  background: orange
}
div:active {
  color: white;
  background: rebeccapurple
}
:active {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Click Away</div>

edited Oct 12, 2016 at 1:34

answered Oct 10, 2016 at 20:36

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

guest271314 Over a year ago

Clicking #a, span elements logs <body> at console, instead of #a, span elements. Document.activeElement "Returns the currently focused element, that is, the element that will get keystroke events if the user types any" , "When there is no selection, the active element is the page's <body> or null"

Dekel Over a year ago

If you want the "clicked" element you can just use event.toElement inside $(document).on('click'

guest271314 Over a year ago

"If you want the "clicked" element you can just use event.toElement" event.toElement logs undefinedat firefox 45, event.originalEvent.explicitOriginalTarget logs clicked node. Requirement of Question is to pass css :active pseudo class to javascript. Are you suggesting that DOM click event is equivalent to css :active pseudo class?

guest271314 · Accepted Answer · 2016-10-10 20:31:39Z

You can utilize :active:hover pseudo class, animation with duration set to 0s, @keyframes at css; animationend event at javascript

:root {
  --activeprop: 0px;
}
div {
  position: relative;
  left: var(--activeprop);
  width: 200px;
  height: 200px;
  background: orange;
}
div:active:hover {
  color: white;
  background: rebeccapurple;
  animation: active 0s;
  -moz-animation: active 0s;
  -webkit-animation: active 0s;
}

@keyframes active {
  from {
    left:var(--activeprop);
  }
  to {
    left:var(--activeprop);
  }
}

@-moz-keyframes active {
  from {
    left:var(--activeprop);
  }
  to {
    left:var(--activeprop);
  }
}
@-webkit-keyframes active {
  from {
    left:var(--activeprop);
  }
  to {
    left:var(--activeprop);
  }
}

<div>Click Away</div>
<script>
for (el of document.querySelectorAll("div")) {
el.addEventListener("animationend", function(event) {
  console.log(`${event.target.nodeName} is :active`)
})
};
</script>

Collectives™ on Stack Overflow

How to pass css :active pseudo class to javascript?

2 Answers 2

Update

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related