I am not sure what to call this, all I can think of is a Repeater Button.
I want to press a button and it fires a function immediately once, eg MyZoom(InOrOut).
But if I keep the mouse button depressed it will keep firing that MyZoom(InOrOut) every one tenth of a second until I release the mouse button.
As you can probably guess from the function name, I will have 2 buttons, a zoom in and a zoom out. They will call MyZoom(-1) to make it smaller and MyZoom(1) to make it bigger.
<button onclick="MyZoom(-1);">Zoom Out</button>
<button onclick="MyZoom(1);">Zoom In</button>
How can I change this to include the repeating effect?
Use the onmousedown and onmouseup events.
In onmousedown start an interval and stop it in onmouseup.
Here's a small example using jQuery:
HTML:
<button class="zoomButton" data-zoom="out">Zoom Out</button>
<button class="zoomButton" data-zoom="in">Zoom In</button>
JavaScript:
var zoomIntervals = {};
$('.zoomButton').on('mousedown', function() {
var mode = $(this).data('zoom');
zoomIntervals[mode] = setInterval(function() {
// here you perform your action.
// check if mode == 'in' or mode == 'out' to determine if
// the user is zooming in or out
}, 100);
}).on('mouseup', function() {
var mode = $(this).data('zoom');
clearInterval(zoomIntervals[mode]);
del zoomIntervals[mode];
});
If you do not (want to) use jQuery, use addEventListener() to register the events and either access the data properties directly (not compatible with older browsers) or use e.g. the ID property to identify the buttons.
I would use jQuery for this. There is an event called mousedown and another event called mouseup that would help you to do that. Basically mousedown event starts a timer (repeating it) that gets stopped when mouseup event is fired.
You could have something like this:
$('#myzoominbutton').mousedown(function() {
alert('zooming is cool');
});
Related
Whenever I hover a markup and right click it, it locks the mouse movement to the drawing and makes it impossible to move the mouse without moving the drawing.
Is it possible to disable this behaviour?
Depending on your specific scenario, there's a few things you can try:
If you're trying to enable camera pan while in the markup mode on a 2D drawing, you can simply "enable navigation" for the markup tool:
viewer.toolController.getTool('markups.core').allowNavigation(true);
If that's not sufficient for your case, you could also try and modify the handleButtonDown method that the markup tool uses to decide whether and how it should handle the mouse button down event. Currently the method looks like this:
this.handleButtonDown = function(event, button) {
if (this.allowNav || (this.is2d && (avp.isRightClick(event, this.viewer.navigation) || avp.isMiddleClick(event)))) {
// If pan tool won't handle button down, then pass over the event
if (this.panTool && this.panTool.handleButtonDown) {
return this.panTool.handleButtonDown(event, button);
} else return false;
}
return true; // Consume event
};
Where avp is just a shortcut to the Autodesk.Viewing.Private namespace.
viewer.toolController.getTool('markups.core').handleButtonDown = function (event, button) {
// Return true when you want the measure tool to "capture" the event and process it somehow,
// or false when you want to ignore the event and allow other tools on the stack to handle it
};
How to trigger multiple mouse-click events on arbitrarily many HTML elements covering each other?
I know you can use pointer-events: none; to let your click pass through your elements, but what if I want to trigger the mouse-click event on an element AND the mouse-click event on arbitrarily many other elements beneath it?
but what if I want to trigger the mouse-click event on an element AND the mouse-click event on arbitrarily many other elements beneath it?
Events bubble. Which means and event fired on an inner element, will also be received by the parent elements until the top most parent.
<div id="topmost">
<div id="second">
<p id="firstp"></p>
</div>
</div>
Assume you are using jquery. Below is how you would listen to click events from all elements below div.id="topmost".
Since the normal flow of events is for any click event (could be any other type of event) that is fired by any element with in the topmost div element will be bubbled to the outermost element, I only list to topmost click event and then check which element fired that event by checking the id of the target element. e.target will be the actual element that the click was performed on. You can either switch target.attr('id') or run it through if else conditions.
$(function () {
$("#topmost").on("click", function (e) {
e.preventDefault();
var target = $(e.target);
if(target.attr('id') === "idOfElement"){
// code to handle the event
}else{
});
A solution could be to track mouse move using :
$( document ).mousemove();
Store coordinates to a global variable then check its position when your element is clicked. That would give something like :
var mousePos = [0,0];
$( document ).mousemove(function( event ) {
mousePos[0] = event.pageX
mousePos[1] = event.pageY
});
$("#target").click(function(){
// Compare mouse coordinates and your items ones using offset, height and width
if(mousePos[0] > $('#target2').offset.left){
// Do whatever you are willing to do
}
});
I want to do a single click and have it not repeat the function if my mouse is still down if that makes any sense.
Currently I have it:
if (mouseDown)
{
avatar.moveABit( 0, -2);
sfxSoundChannel = moveSound.play();
}
and if I keep my Mouse Down it keeps repeating that. I want it to only work with a single click, and have to keep tapping to do it instead of leaving the mouse down.
You probably want
MouseEvent.MOUSE_CLICK
I would add an event listener on the object that is being clicked to listen for the click, and on the click run the handler function which would contain your move and soundplay code.
See this documentation.
You need MouseEvent.CLICK like so:
//Create a function (which moves avatar) to be called on mouse click
function moveAvatar(e:MouseEvent):void
{
avatar.moveABit( 0, -2);
sfxSoundChannel = moveSound.play();
}
stage.addEventListener(MouseEvent.CLICK, moveAvatar); //add mouse click event listener
EDIT: moveABit should not be using ENTER_FRAME event.
I don't know if I understood it correctly, maybe we'll need more of your code to understand what you really want.
I'm assuming that you're using some kind of loop (setInterval, Event.ENTER_FRAME) to check if the mouse button is down or not. If you are, I think you should change that to only fire inside a function like this:
function OnMouseDownHandler(event:MouseEvent):void
{
avatar.moveABit( 0, -2);
sfxSoundChannel = moveSound.play();
}
stage.addEventListener(MouseEvent.MOUSE_DOWN, OnMouseDownHandler, false, 0, true);
If you use MouseEvent.CLICK event the OnMouseDownHandler Method will be fired only when you release the mouse button, using MouseEvent.MOUSE_DOWN will behave more like a "Tap".
here is the problem,I have to attach two event (click and sortable) on one element,but when i click the element,it also trigger sortable complete event. Is there any way to solve this?
I saw the source code of sortables,it bind mousedown event,so it will trigger by click.while how can i deteted whether is fired by click or drag.
otherwise,if there is a good way to detect element resort or not will be fine.
One option, pointed out by Timmeh at the #mootools irc, is to use the onSort event and have a flag there.
Like:
onSort: function () {
this.sorted = true;
},
onComplete: function (el) {
if (this.sorted) {
alert("complete trigger complete");
}
this.sorted = false;
}
Fiddle
Checking the element seems to work http://fiddle.jshell.net/F2VKK/3/
I have simple code to "draw" in canvas element:
function doFirst(){
var x = document.getElementById('canvas');
canvas = x.getContext('2d');
window.addEventListener("mousemove", rys, false);
}
function rys(e){
var xPos = e.clientX;
var yPos = e.clientY;
canvas.fillStyle="#000";
canvas.beginPath();
canvas.arc(xPos-7,yPos-7,10,0,Math.PI*2,true);
canvas.closePath();
canvas.fill();
}
window.addEventListener("load", doFirst, false);
As you can see, the function is working only when the mouse is over the canvas element. Now i want to make it "draw" when the mouse is clicked (just like in paint). Can someone tell me how to do it (with code)?
Thx for help
You need to keep track of the current mouse button state (pressed or not pressed) independently of the mouse movements.
You can do this by attaching event handlers to the "mousedown" and "mouseup" events, similar to how you attached to the "mousemove" event.
In these event handlers, you could keep track of the current state of the first mouse button by updating a global variable indicating whether or not the button is currently pressed. Then, in your "mousemove" handler, you can check this global variable and determine whether or not to paint when the mouse is moved.
When using the "mouseup" and "mousedown" events, you may want to limit your handling to only when the first mouse button is pressed. You can do this by checking that the event property "button" is 0. Note, that you can check for other buttons and keep track of them, also.
You can see a working example of this here: http://jsfiddle.net/mQtKz/