События кнопок
В редакторе
События кнопок
Hellrogh
938
2019-09-22 21:36:19
<!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>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<div class="block-left">
<p class="title">Простые события мыши</p>
<div class="window mousedown">
<p class="description">mousedown - Кнопка мыши нажата над элементом.</p>
</div>
<div class="window mouseup">
<p class="description">mouseup - Кнопка мыши отпущена над элементом.</p>
</div>
<div class="window mouseover">
<p class="description">mouseover - Мышь появилась над элементом.</p>
</div>
<div class="window mouseout">
<p class="description">mouseout - Мышь ушла с элемента.</p>
</div>
<div class="window mousemove">
<p class="description">mousemove - Каждое движение мыши над элементом генерирует это событие.</p>
</div>
</div>
<div class="block-right">
<p class="title">Комплексные события мыши</p>
<div class="window click">
<p class="description">click - Вызывается при клике мышью, то есть при mousedown, а затем mouseup на одном элементе.</p>
</div>
<div class="window contextmenu">
<p class="description">contextmenu - Вызывается при клике правой кнопкой мыши на элементе.</p>
</div>
<div class="window dblclick">
<p class="description">dblclick - Вызывается при двойном клике по элементу.</p>
</div>
<div class="window">
<p class="description">shiftKey + click</p>
</div>
<div class="window">
<p class="description">altKey + dblclick</p>
</div>
<div class="window">
<p class="description">ctrlKey + contextmenu</p>
</div>
</div>
<div class="block">Текст</div><div class="counter">0</div>
<div class="tab">Текст</div><div class="counter">0</div>
<!--правый бар-->
<div class="tab">Текст</div><div class="counter">0</div>
<div class="tab">Текст</div><div class="counter">0</div>
<div class="block onclick">click</div>
<div class="block ondblclick">dblclick</div>
<div class="block onmousemove">mousemove</div>
<script src="js/script.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
</script>
</body>
</html>
.block-left {
position: fixed;
left:0;
top:0;
width:50%;
height:100%;
background:bisque;
overflow:auto;}
.block-right {
position: fixed;
right:0;
top:0;
width:50%;
height:100%;
background:#FFCCCC;
overflow:auto;
}
.window{
position: relative;
width: 300px;
height: 300px;
background-color: #9999CC;
margin: 100px auto;
border: 2px solid green;
}
//Простые события
document.querySelector('.mousedown').onmousedown = function(){
console.log('mousedown');
}
document.querySelector('.mouseup').onmouseup = function(){
console.log('mouseup');
}
document.querySelector('.mouseover').onmouseover = function(){
console.log('mouseover');
}
document.querySelector('.mouseout').onmouseout = function(){
console.log('mouseout');
}
document.querySelector('.mousemove').onmousemove = function(){
console.log('mousemove');
}
//Комплексные события
document.querySelector('.click').onclick = function(){
console.log('click');
}
document.querySelector('.mouseup').onmouseup = function(){
console.log('mouseup');
}
document.querySelector('.contextmenu').oncontextmenu = function(){
console.log('contextmenu');
}
document.querySelector('.dblclick').ondblclick = function(){
console.log('dblclick');
}
document.querySelector('.mousemove').onmousemove = function(){
console.log('mousemove');
}
Войдите для добавления комментария.