I have an image element, following is the html for the button
<input type="image"src="images/undo.png" onmouseover="this.src='images/undo-hover.png'" onmouseout="this.src='images/undo.png'" id="btn_back" onClick="back();" >
When my application makes this input disabled (attribute disabled="disabled") all browsers stop firing mouse events. So I don't get hover images. But opera still keeps firing these event, and I keep getting the hover images on disabled elements.
Can you please try making the INPUT element disabled by default (add disabled="disabled" in the INPUT tag from start). Then see if Opera is still responding to mouse hover. This may not fix the issue right away but will help in figuring out the cause.
Also, another approach could be to call the JS function on mouse event and check if the element is disabled or not. If it is disabled then dont change the src attribute.
HTH,
this is a bug in Opera as we're apparently doing something different than other browsers. Please report it on https://bugs.opera.com/wizard/ and give me the bug ID.
That said, I don't think what you are relying on is standardised anywhere, so possibly you should not write code that depends on this somewhat quirky behaviour. The "disabled" attribute merely means that the element will not do its normal action when clicked. I don't really see any reason why setting disabled should prevent firing mouseover/move. It's easy to check from JS if the button is disabled and not swap the image if it is.
It seems like an expected behavior in opera, Please see the following link.
http://www.quirksmode.org/dom/events/click.html
It says that "A click event on a disabled form field does not fire events in Firefox and Safari. Opera fires the mousedown and mouseup events, but not the click event. IE fires mousedown and mouseup, but not click, on the form. All these implementations are considered correct."
Thanks,
Unnikrishnan B.
Related
I have a paper-button with the on-tap function that opens a paper-dialog that contains a "Accept" paper-button that will close it when clicked.
The problem i'm getting is if depending on my screen resolution, and the dialog's "Accept" button is over the initial button to open the dialog, when clicked, the dialog opens and closes. I'm assuming the on-tap event is being fired to both.
I've tried these 2 methods but they do not seem to help.
event.cancelBubble = true;
event.stopPropagation();
The problem is that a capacitive screens or even mouses can generate multiple tap event on the same spot within a few milisec.
The mouses because a quick change in a high and low voltage (logical 1 and 0) generating an AC signal wich can jump trough on a capacitator (which can be the button two contactor between the air) if the conditions matching. But the onclick event is already catching this case and you does not require to do anything to solve it.
The capacitve screens are capacitators and just rolling your finger should trigger multiple tap events because your skin has different depth of insulation and hard to mark the tap begin and end in some cases.
This physical problem should be solved by the platform, but it is not in every situation currently (but most of the devices are filtering this). Im usally solving this isse with a transparent overlay element wich can catch the pointer events for a little duration so I could catch the "prelling" of a button or the capacitive screen for a few ms.
If a 10-20ms is enough for you then wait a frame in your on-tap function with requestAnimationFrame and then show the dialog. Cheap trick, but it does what it has to, but ultimately you can wait a fix timeout to show the dialog, because you have 100ms to respond a user interaction.
You cannot fix this by manipulating the browser events options though because as I know you dont have option to how much time need to pass until the next same event should happend. But if you wait a frame thats could behave like you add a delay between the events.
I've got this in my html file:
<textarea id="inputbox" placeholder="type here"></textarea>
What's the correct way to wire up a handler that will fire immediately whenever the content of the textarea changes? (whether by keyboard, mouse/clipboard, speech input, brainwave reader, etc)
I tried:
query("#inputbox").on.change.add(handler)
but (at least on Dartium) it only fires after you tab out of the field.
The purpose is to update a "live preview" window, similar to the way Stackoverflow renders Markdown output while you type.
This is the best I came up with so far. I'd be happy to hear if anyone knows of a more compact or preferable alternative.
Edit: Code snippet updated to the new pattern for event registration.
import 'dart:html';
void main() {
query("#inputbox")
..onChange.listen(handler)
..onKeyDown.listen(handler)
..onKeyUp.listen(handler)
..onCut.listen(handler)
..onPaste.listen(handler);
}
void handler(Event event) {
print((query("#inputbox") as TextAreaElement).value);
}
The precise behavior will vary between browsers and operating systems.
You could skip keyDown, but be aware keyDown and keyUp behavior is influenced by the OS and isn't guaranteed to be symmetric. You might conceivably miss a change, at least until the next keyUp or change event gets fired. Indeed I proved this out by creating a little app on Windows 7 to send an orphan WM_KEYDOWN message to Dartium and IE9.
keyPress could be used instead of keyUp and keyDown, but won't generate events for certain keys like backspace and delete.
cut and paste react immediately to a cut or paste performed with the mouse. If you don't use them, the change event will capture the change, but not until after the field loses focus, or sometimes even later.
The input event could replace all listeners above and seems to work great in Dartium, but under IE9 it only captures character additions, not removals.
Note keyUp and keyDown may generate additional unwanted events for cursor keys, home, end, shift, etc. (e.g. In IE9). It will fire in addition to the cut/paste listeners when the user uses shortcut keys for those actions.
While the question is specific to Dart, a lot of the discussion above applies to any code listening to the DOM. Even keyCode values aren't standardized across browsers (more detail).
It may also be worthwhile checking out the KeyboardEventController class, though by and large when I tested it the edge case behavior was similar to that noted above. That may or may not be by design. The Dart developers do make some effort to insulate you from cross-browser inconsistencies, but it's still a work in progress.
Also while we're talking about textarea, remember to use its value property, not its text property. Finally, be sure your handler throttles its reactions to "bursts" of keyboard activity (e.g. some sort of timer that briefly defers the guts of your handler and rolls up any additional events which occur in the meantime).
Related questions and links:
Handle events in DART
Handling Keyboard events in Dart Language
How do you listen for a keyUp event in Dart?
Cross browser key event handler in Dart
jQuery example that skips keyboard events and binds to propertychange
Its not clear if you are using polymer or not, but if you are, you can subscribe to a change to a variable annotated with #observable by creating a function in the polymer element in the form as [variable name]Changed(oldvalue). I originally found this here: How to subscribe to change of an observable field
I've implemented iScroll into a web page, intended for a smartphone. I haven't tried this yet in an emulator so I don't know if this is just a PC problem.
The scroller contains a UL. Each LI is marked with an onclick event handler:
$("li.myitem").click(showItemDetails);
...
function showItemDetails() ...
When I implemented this prior to using iScroll, if I click ONCE on a LI I get one call to my click handler (which opens another view window). After using iScroll I have two bad behaviors.
When scrolling around, sometimes iScroll thinks that I want to click on something. That is, iScroll is working something like an "onmouseup" event.
When clicking on an event, whether intentionally or not, iScroll is generating 10, 20 and even 30 events (or event threads) for that one place that a single event is intentioned for. I traced it, and all of the events are coming from the same LI item. This occurs just as badly if I change the click handler to a double-click handler (dblclick()).
In the immediate, I'm reduced to putting in a gatekeeper, a flag saying "I'm already busy with an event, go away". I could also change the interface to have the user click (select) an LI and then click on a separate button to see the details.
But I'm concerned about what iScroll is doing.
Any ideas? Need to see code? I can't put on the whole app (a thousand lines long, after comments), but I can show decent snips. But I'm hoping that this is an "oh, yeah" moment and someone tells me a known story.
Check the test page here http://rickchristie.com/testfocus.html
Correct me if I'm wrong:
onfocus happens when the element gains focus.
onblur happens when the element loses the focus.
In Firefox 3.6.12 (tested on mac and windows), using onblur without onfocus works fine. However when an input element has both onfocus and onblur element, it gets weird:
When you click at the input, onblur is fired instead of onfocus.
Right after onblur, onfocus fires immediately.
You can't type anything in the textbox.
Other browsers (Safari, Opera) works as expected. Is this a bug? Is it just me or is everybody using Firefox experiencing this?
Update
This behavior seems to happen only when onblur and onfocus contains alert - not when I use something like window.log.
When the alert box opens, focus is removed from the text box. Notice that the "BLUR" alert box opens right on top of the "FOCUS" alert box (the latter opened first), so that's why it looks like onblur fired before onfocus.
Look at my test page, which increments a counter when either event handler is called and also adds a second alert box after both of the others. It seems that Firefox actually starts executing the blur handler as soon as the alert box from the focus handler opens, despite the conceptually single-threaded model of the browser. However, when the first (focus) alert box is closed, the second (blur) alert box has to also be closed before the third (after focus) alert box opens.
I don't know Firefox why does it the way it does. Chrome keeps firing the focus handler again and again, and Opera, Safari, and IE do it the way you would expect — not taking away the text box's focus.
EDIT: I've found https://bugzilla.mozilla.org/show_bug.cgi?id=31889 and will be posting this test case there – apparently it used to be even worse.
Is there a 'valid' solution for the dialog to scroll with the scrollbar instead of still being fixed from the center of the inner window bound ?
There is some situation where the user may have a too small resolution to contain the dialog, and in that case part of the dialog maybe hidden.
You may have a Ok or confirm button in the hidden part, and then the popup may not be closed, nor validated ! Blocking situation.
I tried to change a css into the code from fixed to absolute, and then the dialog scroll with the page: great! But... Meanwhile doing this, opening another popup, do not position it again centered into the layout. Maybe a solution is to recenter the dialog on each onOpen event.
Any help welcome.
The dialog was written to be fixed and as such is not easily changeable.
You could change the position to absolute, but all of the IE hacks will force it to behave as fixed.
In SimpleModal 1.4.2 you can simply set fixed to false:
$('#myModal').modal({ fixed: false });
This worked for us on Chrome and IE all the way back to IE8. (We don't support IE7.)