<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <h1> ZRender 事件测试</h1>
  <p> Events: click, mousedown, mouseup, mousewheel, dblclick, contextmenu, mouseover, mouseout</p> 
  <p> Try it </p>
  <div id="main"></div>
  <p id="message" class="msg"></p>
</body>

</html>

#main {
  width: 550px;
  height: 100px;
}
.msg {
  width: 310px;
  text-align: center;
}
var $message = document.getElementById('message'); 
var zr = zrender.init(document.getElementById('main'));
var circle = new zrender.Circle({
    shape: {
        cx: 150,
        cy: 50,
        r: 40
    },
    style: {
        fill: 'red',
        stroke: '#F00'
    }
});
// 事件注册放在渲染前后都可以
circle.on('click', function () { // change 'mousedown' 'mouseup' 'dblclick'
  alert('you click it')
})
circle.on('mousewheel', function () { 
  alert('you mousewheel it')
})
circle.on('contextmenu', function () { 
  alert('you contextmenu it')
})
circle.on('mouseover', function () {
  $message.innerHTML = 'you mouseover it'
})
circle.on('mouseout', function () {
  $message.innerHTML = ''
})

zr.add(circle);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/zrender/4.0.7/zrender.min.js