Home > Web Front-end > JS Tutorial > body text

How to stop link loading with jQuery

(*-*)浩
Release: 2019-05-28 16:04:39
Original
2236 people have browsed it

Encountered a problem during actual development. Before making a click on the thumbnail to view a larger image.
Some users use old versions of IE browsers, or users turn off the JavaScript function.

How to stop link loading with jQuery

If you rely entirely on js to achieve the effect, some users may not be able to use the website normally (there may be fewer and fewer such users).

One technology we need to use is non-obtrusive JavaScript.

If JS is not supported, the page will jump to another webpage

HTML code

<a href="../_images/large/slide1.jpg"> 
   <img src="../_images/small/slide1.jpg" alt="golf balls">
</a>
Copy after login

Use the tag, including < ;img> tag. Using this method, browsers that do not support js can also see large images.

But if you click the picture directly, it will jump to the web page specified by the tag.

If you want to prevent the jump, there are two methods below.

Method 1: Return a false

jQuery code

$('a').click(function(evt){ 
   return false;
});
Copy after login

Method 2: Use preventDefault() function

jQuery Code

$('a').click(function(evt){
   evt.preventDefault();
});
Copy after login

The above two methods can effectively prevent link jumps.

It should be noted that in method one, the "return false;" statement must be the last line of the function, because once the JavaScript parser encounters the return statement, it will exit the function.

The above is the detailed content of How to stop link loading with jQuery. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!