jQuery 마우스 이벤트 mousedown 및 mouseup 이벤트

사용자 상호작용에서 가장 간단하고 직접적인 조작은 클릭 조작입니다. 따라서 jQuery는 사용자의 마우스 다운 조작을 모니터링할 수 있는 mousedown 단축키 메소드를 제공합니다. 마우스 업 동작. 두 가지 방법의 사용법은 비슷합니다. 아래의 예로 mousedown()을 사용하면 매우 간단합니다.

방법 1: $("").mousedown()

$ele 요소를 매개 변수 없이 바인딩합니다. 일반적으로 사용됩니다. 트리거할 이벤트를 지정하는 것은 덜 일반적으로 사용됩니다.

아래의 예를 들어 보겠습니다. 버튼을 클릭하면 텍스트 색상이 변경됩니다. 마우스를 놓으면 다른 색상으로 변경됩니다

<!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>

마우스를 클릭했지만 놓지 않았습니다. 텍스트 색상은 빨간색이고, 놓으면 녹색입니다

지속적인 학습

새로운 파일

<!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>

제출하다 코드 재설정

자동운전