How to make button disabled for touchstart / touchend event?

Question

I was surprised to see that the disabled attribute for the button is ignored on the mobile version of the site. How to disable the button for touchstart / touchend events? <button ontouchend="alert();" disabled="disabled" style="touch-event: none">Test for touch</button>show alert() after touch and ignoring disabled attribute. I tried to apply touch-event: nonein style - nothing happened

UPD. Here is some code - its workable but it not fine for simple use

$("button").on("touchend", function()
{
    if($(this).is(":disabled") == false)
    alert(1)    
});

Please have a look at this answer, might help you [link](https://stackoverflow.com/a/5875143/2402610) — Mahmoud Abdelsattar, Aug 09 '19 at 06:57

score 0 · Accepted Answer · edited Aug 09 '19 at 10:14

0

I faced the same issue and located this topic.

As long as I tried it, disabled property disabled onClick, yet doesn't disabled onTouchStart and onTouchEnd.

And actually, onTouchStart and onTouchEnd is not an official property for <button>. I guess that's why.

edited Aug 09 '19 at 10:14

Pingolin

3,161
6
25
40

answered Aug 09 '19 at 09:40

Koki Fukushima

16
1

score 0 · Answer 2 · answered Mar 01 '22 at 15:57

0

An alternative u could use css adding the touch-action: none property to the button container

answered Mar 01 '22 at 15:57

Juan Carlos Pacheco Hernandez

481
4
2

How to make button disabled for touchstart / touchend event?

2 Answers2