Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Trigger an event after specific order of clicks

For a project I'm currently working on am trying to reach the following:

I have a simple page, on this page are 4, hidden and not visible elements, they are simply formatted as this:

<a href="#" class="link_1"></a>
<a href="#" class="link_2"></a>
<a href="#" class="link_3"></a>
<a href="#" class="link_4"></a>

Basically all i want, is too build a sort of Easter egg, so when a user clicks these buttons in a specific order, i.e. link_4 -> link_1 -> link_3 -> link_2 it triggers a certain event, whatever this might be.

Ofcourse the event could only be triggered if the right combination/order of clicks have been done.

Any ideas how to go about this using jQuery?

like image 293
Marvin Stobberingh Avatar asked Dec 05 '12 21:12

Marvin Stobberingh


People also ask

How do I trigger a click event automatically?

If you want to run an automated click event more than once, you can write the for loop and call target. click() inside the for loop. It automatically invokes the click of the button until the counter reaches its maximum value and outputs the Triggered event 5 times.

In what order does event flow occur after a click '?

That is: for a click on <td> the event first goes through the ancestors chain down to the element (capturing phase), then it reaches the target and triggers there (target phase), and then it goes up (bubbling phase), calling handlers on its way.

How do you prioritize events in JavaScript?

JavaScript events don't take any priorities. When and event is fired it is added to an event queue and executed as soon as possible. You can claim that it is a general rule that onclick attribut events will always trigger first, and that will always be true, but it's not because they are prioritized.

How do you trigger a click event in react JS?

To add the click event in React using plain JavaScript, you need to use addEventListener() to assign the click event to an element. Create one <button> element as ref props so that it can be accessed to trigger the click event.


1 Answers

var click_order = [];
$('a').click(function (e) {
    click_order.push($(this).index());
    if (click_order.slice(-4) == '3,0,2,1') {
        // easter egg stuff
    }
});
like image 139
Brian Cray Avatar answered Sep 19 '22 01:09

Brian Cray