How to prevent mobile browsers from clicking on pictures to browse

On some mobile browsers, if you click on a picture, you will have a browsing behavior.

QQ does not have this default behavior, but UC does.

Therefore, in order to achieve the effect of 1, this default browsing behavior needs to be prohibited.

Here are several methods:

1. Add onclick = "return false" to the img element

<img src="a.png" onclick="return false" />

2. Insert the picture as a background image

background:url(a.png) norepeat center;

3. Use js event to block the default behavior, which needs attention here!

var img = document.getElementById('banner');
img.addEventListener('click',function(e){
 　　 e.preventDefault();
});

As for the click event here, it can also be touchend event, but it cannot be touchstart and touchmove event!

Because when using touchstart and touchmove events, if there is a super large banner diagram at the top of the page, when the horizontal screen is displayed or the screen width like ipad is larger than the height, the whole banner diagram occupies the screen, and the page cannot slide at this time. Because you use touchstart and touchmove to disable the default behavior of pictures, the page doesn't respond to how your fingers slide. It happens that this sliding behavior triggers touchstart and touchmove.

4. Implement through CSS3 attributes

img {
pointer-events: none;
}

This setting will make the img tag point; Event invalidation. If you need to click to keep the event, you need to add a parent element to handle the click event.