-
-
Save pyTonyc/c5eae0ac1cb05857cd0b2aff8510a496 to your computer and use it in GitHub Desktop.
Exemplo de eventos de mouse usando Brython
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Eventos de mouse</title> | |
| <script type="text/javascript" | |
| src="https://cdn.jsdelivr.net/npm/[email protected]/brython.min.js"> | |
| </script> | |
| <script type="text/python"> | |
| """ | |
| Testando eventos de mouse com Brython. | |
| Sobre o Bind: bind(css_selector, evento) | |
| Informações sobre eventos na doc do Brython: | |
| https://www.brython.info/static_doc/en/events.html | |
| https://www.brython.info/static_doc/en/mouse_events.html | |
| Events API: | |
| https://developer.mozilla.org/en-US/docs/Web/API/event | |
| CSS2 dom level: | |
| https://www.w3.org/2003/01/dom2-javadoc/org/w3c/dom/css/CSS2Properties.html | |
| """ | |
| from browser import document, bind | |
| btn_span_map = { | |
| 'btn-1': 'span-1', | |
| 'btn-2': 'span-2', | |
| 'btn-3': 'span-3', | |
| 'btn-4': 'span-4', | |
| } | |
| def event(target, text, color): | |
| span = btn_span_map[target] | |
| document[span].text = text | |
| document[target].style.color = color | |
| @bind('button', 'mouseup') | |
| def span_down(evt): | |
| event(evt.currentTarget.id, 'mouse_up', 'blue') | |
| @bind('button', 'mouseenter') | |
| def span_down(evt): | |
| event(evt.currentTarget.id, 'mouse_enter', 'orange') | |
| @bind('button', 'mouseleave') | |
| def span_down(evt): | |
| event(evt.currentTarget.id, 'mouse_leave', 'green') | |
| @bind('button', 'mousedown') | |
| def span_up(evt): | |
| event(evt.currentTarget.id, 'mouse_down', 'tomato') | |
| </script> | |
| </head> | |
| <body onload="brython(1)"> | |
| <button id="btn-1" type="button" name="button">Botão</button> | |
| <span id="span-1"></span> | |
| <br> | |
| <button id="btn-2" type="button" name="button">Botão</button> | |
| <span id="span-2"></span> | |
| <br> | |
| <button id="btn-3" type="button" name="button">Botão</button> | |
| <span id="span-3"></span> | |
| <br> | |
| <button id="btn-4" type="button" name="button">Botão</button> | |
| <span id="span-4"></span> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment