Prevent force touch event on image but still allow

问题:

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!

回答1:

(Using jQuery, but can probably be accomplished 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.