mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2025-06-10 18:13:22 +02:00
dist
libraries
packages
core-js
editor
mindplot
web2d
__tests__
cypress
src
test
playground
resources
Grid.js
arrow.html
arrow.js
curvedLine.html
curvedLine.js
events.html
events.js
font.html
font.js
group.html
group.js
image.html
image.js
index.html
line.html
line.js
polyLine.html
polyLine.js
prototype.html
prototype.js
rect.html
rect.js
shapes.html
shapes.js
styles.css
text.html
text.js
workspace.html
workspace.js
.eslintignore
.eslintrc.json
.gitignore
README.md
babel.config.json
cypress.json
jsconfig.json
package.json
webpack.common.js
webpack.dev.js
webpack.playground.js
webpack.prod.js
webapp
.dockerignore
.gitignore
.nvmrc
.prettierignore
.prettierrc.json
CONTRIBUTING.md
README.md
bitbucket-pipelines.yml
docker-compose.snapshots.update.yml
docker-compose.snapshots.yml
lerna.json
package.json
webpack.common.js
yarn.lock
140 lines
7.8 KiB
HTML
Executable File
140 lines
7.8 KiB
HTML
Executable File
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
<head>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Elements Event Handling</h1>
|
|
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
This examples shows the ability to attach listeners to handle several events.
|
|
In this example, you can attach different events to three elements: workspace, small elipse and the
|
|
big
|
|
elipse.
|
|
Events will follow the event bubbling behaviour.
|
|
</td>
|
|
<td>
|
|
<div id="workspaceContainer" style="float:left;"></div>
|
|
|
|
<div class="eventForm">
|
|
<form action="">
|
|
<fieldset>
|
|
<legend>Workspace Events</legend>
|
|
<label>Click Event:
|
|
<input type="button" value="Register"
|
|
onclick="(!wClickEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
</label><br />
|
|
<label>Double Click Event:
|
|
<input type="button" value="Register"
|
|
onclick="(!wDblCickEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
</label><br />
|
|
<label>Mouse Over Event:
|
|
<input type="button" value="Register"
|
|
onclick="(!wMouseoverEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
</label><br />
|
|
<label>Mouse Out Event:
|
|
<input type="button" value="Register"
|
|
onclick="(!wMouseoutEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
</label><br />
|
|
<label>Mouse Move Event:
|
|
<input type="button" value="Register"
|
|
onclick="(!wMousemoveEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
</label>
|
|
</fieldset>
|
|
</form>
|
|
|
|
<form action="">
|
|
<fieldset>
|
|
<legend>Small Elipse Events</legend>
|
|
<label>Click Event:
|
|
<input type="button" value="Register"
|
|
onclick="(!esClickEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
</label><br />
|
|
<label>Double Click Event:
|
|
<input type="button" value="Register"
|
|
onclick="(!esDblCickEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
</label><br />
|
|
<label>Mouse Over Event:
|
|
<input type="button" value="Register"
|
|
onclick="(!esMouseoverEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
</label><br />
|
|
<label>Mouse Out Event:
|
|
<input type="button" value="Register"
|
|
onclick="(!esMouseoutEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
</label><br />
|
|
<label>Mouse Move Event:
|
|
<input type="button" value="Register"
|
|
onclick="(!esMousemoveEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
</label>
|
|
</fieldset>
|
|
</form>
|
|
|
|
<form action="">
|
|
<fieldset>
|
|
<legend>Big Elipse Events</legend>
|
|
<label>Click Event:
|
|
<input type="button" value="Register"
|
|
onclick="(!ebClickEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
</label><br />
|
|
<label>Double Click Event:
|
|
<input type="button" value="Register"
|
|
onclick="(!ebDblCickEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
</label><br />
|
|
<label>Mouse Over Event:
|
|
<input type="button" value="Register"
|
|
onclick="(!ebMouseoverEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
</label><br />
|
|
<label>Mouse Out Event:
|
|
<input type="button" value="Register"
|
|
onclick="(!ebMouseoutEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
</label><br />
|
|
<label>Mouse Move Event:
|
|
<input type="button" value="Register"
|
|
onclick="(!ebMousemoveEventLogger.changeState())?this.value='Register':this.value='Unregister'" />
|
|
</label>
|
|
</fieldset>
|
|
</form>
|
|
|
|
</div>
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
<tr>
|
|
<td>Multiple listeners can be attached to an element to handle an event type.
|
|
In this example, multiple listeners can be registered to the elipse element to handle the click
|
|
event type.
|
|
</td>
|
|
<td>
|
|
<div id="workspaceMultipleEvents" style="float:left;"></div>
|
|
|
|
<div class="eventForm">
|
|
<form action="">
|
|
<fieldset>
|
|
<legend>Elipse Click Events Listeners</legend>
|
|
<label>Registered Listeners #:
|
|
<input type="text" disabled="disabled" value="0" id="listenerCounter" maxlength="2"
|
|
size="2" />
|
|
</label>
|
|
<br />
|
|
<input type="button" value="Register Listener"
|
|
onclick="multipleHandler.registerOneListener();$('#listenerCounter').first().value=multipleHandler.listenerCount();" />
|
|
<input type="button" value="UnRegister Listener"
|
|
onclick="multipleHandler.unRegisterOneListener();$('#listenerCounter').first().value=multipleHandler.listenerCount();" />
|
|
</fieldset>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</body>
|
|
|
|
</html> |