您的位置：首页 > Web前端 > JavaScript

原生JS添加鼠标事件

2017-04-24 15:19 561 查看

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

body { background-color:#bbb;}

canvas { background-color:#fff}

</style>

</head>







<body>

<canvas id="cnavas" width="400" height="400"></canvas>

<script>

window.onload = function(){

    var canvas = document.getElementById('cnavas');



    function onMouseEvent(event){

        console.log(event.type)

    }



    canvas.addEventListener("mousedown",onMouseEvent,false)

    canvas.addEventListener("mouseup",onMouseEvent,false)

    canvas.addEventListener("click",onMouseEvent,false)

    canvas.addEventListener("dblclick",onMouseEvent,false)

    canvas.addEventListener("mousewheel",onMouseEvent,false)

    canvas.addEventListener("mousemove",onMouseEvent,false)

    canvas.addEventListener("mouseover",onMouseEvent,false)

    canvas.addEventListener("mouseout",onMouseEvent,false)



}

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航