We have a need in our image gallery to prevent Apple's Force touch events on images, but still allow the long-press which triggers the 'Save Image' callout. We provide instructions for our iOS users to long-press on the image and then select 'Save Image', but users get very confused if they accidentally press too hard and trigger a Force Touch event - especially if it 'pops' and loads the image in a new page.

Initially I thought of listening to the touchforcechange events, and then calling preventDefault when the force reached a certain level. Something like this:

imgEl.addEventListener( 'touchforcechange', 'onTouchForceChange', false )

function onTouchForceChange( e ){
    if( e.changedTouches[0].force > 0.5  ){
        e.preventDefault()
    }
}

However, that seems to block the long press events as well. There also doesn't seem to be one particular force level at which the event switches to a Force Touch.

Adding the css property -webkit-touch-callout: none; to the image does block the Force Touch event, but again, it also blocks the callout on the long press.

Any ideas greatly appreciated!

We have a need in our image gallery to prevent Apple's Force touch events on images, but still allow the long-press which triggers the 'Save Image' callout. We provide instructions for our iOS users to long-press on the image and then select 'Save Image', but users get very confused if they accidentally press too hard and trigger a Force Touch event - especially if it 'pops' and loads the image in a new page.

Initially I thought of listening to the touchforcechange events, and then calling preventDefault when the force reached a certain level. Something like this:

imgEl.addEventListener( 'touchforcechange', 'onTouchForceChange', false )

function onTouchForceChange( e ){
    if( e.changedTouches[0].force > 0.5  ){
        e.preventDefault()
    }
}

However, that seems to block the long press events as well. There also doesn't seem to be one particular force level at which the event switches to a Force Touch.

Adding the css property -webkit-touch-callout: none; to the image does block the Force Touch event, but again, it also blocks the callout on the long press.

Any ideas greatly appreciated!

• javascript
• ios
• safari
• webkit
• dom-events

Share Improve this question Follow asked Feb 10, 2017 at 13:11 Henry DawsonHenry Dawson 8111 silver badge22 bronze badges 2

• It looks as though the WebKit team is investigating events for handling Force Click, which presumably would provide enough control to do this. webkit/status/#feature-force-click-events – Henry Dawson Commented Feb 13, 2017 at 2:51
• "However, that seems to block the long press events as well. There also doesn't seem to be one particular force level at which the event switches to a Force Touch." is this true? There might be a constant somewhere for this. – vadersfather Commented May 10, 2018 at 18:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

(Using jQuery, but can probably be acplished without it)

this seems to be working for me, tested on iPhone 7 plus iOS 10.3.3:

window.addEventListener('touchforcechange', function(event) {
        var force = event.changedTouches[0].force;
        var id = event.changedTouches[0].target.id;

        if ($('#' + id).hasClass('class') && force > 0.1) {
            event.preventDefault();
            console.log('prevented 3D touch on element with id = ' + id);
        }
    });

replace 'class' with the class of the elements on which 3d touch should be prevented. in your case, probably a class shared by all the image elements in the galary.

I think the main problem with yours is that 0.5 is probably too high of a threshold.

You can embed your image in an svg tag to prevent this.