jQuery: toggle functions on click, since toggle() is no longer available

Question

If we have 2 functions we want to execute alternatively, one at mouseover and the other at mouseout, we can do that easily in jQuery:

var firstFunc = function() {
  console.log("first");
}

var secondFunc = function() {
  console.log("second");
}

$('.class-name').hover(firstFunc, secondFunc);

.class-name {
  display: inline-block;
  padding: 5px 15px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 14px;
  border: 2px solid #069;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="class-name">Hover me</div>

Since the deprecation of toggle(), we can not use it to trigger the two functions alternatively, on click event.

In fact, I want to use both: hover on desktops and click on mobile devices.

Questions:

1. What shall we use instead?
2. What would be helpful if used in a manner similar to the hover() method, without the use of an if clause?

Answer 1

Better way is to create separate events.

$(document).on('mouseover', '.class-name', function () {
    console.log("first");
});

$(document).on('mouseout', '.class-name', function () {
    console.log("second");
});