Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaScript のClickEvent のテスト
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mouce Event</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjapanese.css">
<style>
html, body {
font-family: 'Noto Sans Japanese', sans-serif;
}
#click-space {
width: 20rem;
height: 10rem;
border: .1rem solid #333;
border-radius: .3rem;
}
p {
margin: .5rem 0;
}
</style>
</head>
<body>
<header>
<h1>Click Test</h1>
</header>
<main>
<div id="click-space">
<h2>Click Space</h2>
</div>
<button id="btn-reset">reset</button>
<div id="msg">
</div>
</main>
<script>
window.onload = function(){
var click_space = document.getElementById('click-space');
var msg = document.getElementById('msg');
// MouseEvent
(function() {
click_space.addEventListener('mousedown', mouseDown);
function mouseDown(event) {
msg.appendChild(createP('mousedown'));
console.log('mousedown');
console.log(event);
}
click_space.addEventListener('mouseup', mouseUp);
function mouseUp(event) {
msg.appendChild(createP('mouseup'));
console.log('mouseup');
console.log(event);
}
click_space.addEventListener('click', click);
function click(event) {
msg.appendChild(createP('click'));
console.log('click');
console.log(event);
}
click_space.addEventListener('dblclick', dblClick);
function dblClick(event) {
msg.appendChild(createP('dblclick'));
console.log('dblclick');
console.log(event);
}
click_space.addEventListener('contextmenu', contextmenu);
function contextmenu(event) {
msg.appendChild(createP('contextmenu'));
console.log('contextmenu');
console.log(event);
}
function createP(inner){
var p = document.createElement('p');
p.innerHTML = inner;
return p;
}
})();
// Reset
(function() {
var btn = document.getElementById('btn-reset');
btn.addEventListener('click', function(event){
removeEverything(msg);
});
function removeEverything(element) {
while (element.firstChild) {
element.firstChild.remove();
}
}
})();
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.