Home >Web Front-end >HTML Tutorial >The event attribute onclick triggered by a mouse click on an element in html

The event attribute onclick triggered by a mouse click on an element in html

黄舟
黄舟Original
2017-11-06 09:46:514549browse

Example

Execute a piece of JavaScript when the button is clicked:

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

Browser support

IE

Firefox

Chrome

Safari

Opera

All major browsers support the onclick attribute.

Definition and Usage

The onclick attribute is triggered by a mouse click on the element.

Note: The onclick attribute does not apply to the following elements: dde6fb694e6711ae5e6f381704c04ae4, 71af07a0e88a1ac1ff73f855702ac153, 0c6dc11e160d3b678d68754cc175188a, 93f0f5c25f18dab9d176bd4f6de5d30e, 100db36a723c770d327fc0aef2ce13b1, d5ba1642137c3f32f4f4493ae923989c, e8e496c15ba93d81f6ea4fe5f55a2244, 0c68fef83818661b6da588c77ca3985e, 3f1c4e4b6b16bbbd69b2ee476dc4f83a, c9ccee2e6ea535a969eb3f532ad9fe89 or b2386ffb911b14667cb8f0f91ea547a7.

Differences between HTML 4.01 and HTML5

None.

Syntax

<element onclick="script">

Attribute value

Value Description
script Script that runs when onclick occurs.

The small system I am making now uses Metro UI CSS in order to achieve the cool effect that the leader said, but because of how to give each tile (div tag) After struggling for a long time to pass parameters in the click event (I am a novice), I finally found a solution through the data-* attribute. The following are jQuery and js implementations:

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


The above is the detailed content of The event attribute onclick triggered by a mouse click on an element in html. For more information, please follow other related articles on the PHP Chinese website!

Statement:
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