События кнопок

В редакторе

События кнопок

Hellrogh
787
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'); }
Войдите для добавления комментария.
Нет комментариев
Яндекс.Метрика Яндекс.Метрика