jQuery mouse events mousedown and mouseup events

In user interaction, the simplest and most direct operation is the click operation. Therefore, jQuery provides a mousedown shortcut method that can monitor the user's mouse click operation. There is also a corresponding method mouseup shortcut method that can monitor the user's mouse click operation. start operation. The usage of the two methods is similar. The following uses mousedown() as an example.

It is very simple to use:

Method 1: $("").mousedown()

Binding The $ele element, without any parameters, is generally used to specify the triggering of an event. It may be rarely used.

Let's do an example below. Click the button to make a piece of text change color. When the mouse is released, it will change color. Another color

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>事件</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <p>php 中文网</p>
    <button>切换</button>


    <script>
      $("button").mousedown(function(){
        $("p").css('color','red');
      })

       $("button").mouseup(function(){
        $("p").css('color','green');
      })

    </script>
</body>
</html>

When the mouse is clicked but not released, the text color is red, and when the mouse is released, it is green

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <p>php 中文网</p> <button>切换</button> <script> $("button").mousedown(function(){ $("p").css('color','red'); }) $("button").mouseup(function(){ $("p").css('color','green'); }) </script> </body> </html>

submit Reset Code

Automatic operation

jQuery mouse events mousedown and mouseup events

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]