>  기사  >  웹 프론트엔드  >  html의 요소를 마우스로 클릭하면 발생하는 이벤트 속성 onclick

html의 요소를 마우스로 클릭하면 발생하는 이벤트 속성 onclick

黄舟
黄舟원래의
2017-11-06 09:46:514467검색

버튼을 클릭할 때 JavaScript 실행:

<button onclick="copyText()">Copy Text</button>

브라우저 지원

IE

Firefox

Chrome

Safari

Opera

모든 주요 브라우저는 onclick 속성을 지원합니다.

정의 및 사용법

onclick 속성은 요소를 마우스로 클릭하면 트리거됩니다.

참고: onclick 속성은 다음 요소에 적용되지 않습니다: dde6fb694e6711ae5e6f381704c04ae4, 71af07a0e88a1ac1ff73f855702ac153, 0c6dc11e160d3b678d68754cc175188a, 93f0f5c25f18dab9d176bd4f6de5d30e, 100db36a723c770d327fc0aef2ce13b1, d5ba1642137c3f32f4f4493ae923989c, e8e496c15ba93d81f6ea4fe5f55a2244, , <script>, <style> 또는 <title>. </script>

HTML 4.01과 HTML5의 차이점

없음.

Syntax

<element onclick="script">

속성값

Value Description
script onclick 발생시 실행할 스크립트입니다.

지금 만들고 있는 작은 시스템은 리더님이 말씀하신 멋진 효과를 얻기 위해 Metro UI CSS를 사용하고 있는데, 각 타일의 클릭 이벤트(div 태그)에 매개변수를 전달하는 방법 때문에 시간이 오래 걸렸습니다. ) (저는 초보자입니다) 마침내 data-* 속성을 통해 해결책을 찾았습니다. 다음은 jQuery 및 js 구현입니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
         <script src="js/jquery/jquery.min.js"></script>
         <script>
             $(document).ready(function(){
                 $(".title").click(function(){
                     var id=$(this).data("id");
                     var name=$(this).data("name");
                     alert("Id: "+id+" ; Name: "+name);});
             });
             
             function onClick(e){
                 var id=e.getAttribute("data-id");
                var name=e.getAttribute("data-name");
                 alert("Id: "+id+" ; Name: "+name);
             }
         </script>
    </head>
    <body>
        <div class="title" data-id="1" data-name="Microsoft">Click Me</div>
        <div id="add" data-id="2" data-name="Google" onclick="onClick(this)">Click Me</div>
    </body>
</html>


위 내용은 html의 요소를 마우스로 클릭하면 발생하는 이벤트 속성 onclick의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.