jQuery .click() is clicking, but it shouldn´t

Question

while testing my JavaScript I have the following problem:

$('#idOfMyElement').click();

is executed. But I want to verfiy with my test, that is is not executed, because it has the following CSS:

<span style="cursor: not-allowed; pointer-events: none;" id="idOfMyElement"></span>

I debugged it and it is sure, that when the .click() is executed, it has DEFINITELY the mentioned CSS-attributes. In my normal program it works (means that the click doesn´t work), but in my test the click works, even if it shouldn´t.

I have no clou, what might be the problem. Thanks for your help!

Answer 1

Looks like in your test you are triggering the event programmatically by using $('#idOfMyElement').click();; in that case it is not bound by the CSS mouse rules, and thus the click handlers will get executed.

You need to check the mouse pointer rules before triggering the click event in your test suite.

Answer 2

Prevent the default click event using jQuery:

$('#idOfMyElement').on('click', function(e) {
  e.preventDefault(); });

* UPDATE *

Now that I know what you're trying to do, I highly recommend using javascript over CSS for this because CSS does not work the way you're trying to use it – Javascript does. Instead of using CSS attributes, use Javascript variables.

When you want the element to be clickable,

$('#idOfMyElement').prop('disabled', false);

When it should be unclickable,

$('#idOfMyElement').prop('disabled', true);

The browser takes care of the cursor without needing CSS, and click events should react appropriately. Hope that was helpful!

Answer 3

Pointer events only respond correctly to a real pointer event. If you trigger click() function it fires in all times that you make it. Just add a condition reading if pointer events is active or replace it by a disabled attribute