Focus and blur events for HTMLDivElement? - javascript

I implemented a custom drop down with HTML, CSS and JavaScript. It works well now, but I am not happy with the way I am doing "blurring" right now. When you open the list, and then click somewhere else, it should collapse. What I did was that I added an event listener (mousedown) to the window after expanding the list, and removing the listener after collapsing. The event basically checks whether the DOM event happened on the right element using target and if not, then blur the drop down control.
I know about focus and blur. However, they only seem to work on form elements, which I find quite understandable. They also support other scenarios like when "tabbing" away.
Anyway, I am asking you if there is a better way of doing what I am doing right now. What I do just feels stupid.

Maybe you could have a dummy input and focus that when the control is active. Then watch the blur and close the list. It would not be able to be display:none but maybe opacity:0, or just out-of-view.

What I do is use mouseout to close my custom lists. I create a bounding box around my drop down. That box has the onmouseout event attached to it that closes the drop down when the mouse moves outside of it. This way you can have a little padding outside your list that would give your users a little better functionality then just mouseout on your basic list.
If you want to do it using click events, I would have a global function, like it seems you have setup, and call that function on any click events on the page.

Related

javascript how to determine what is cancelling an event

I have jquery, bootstrap included in a page I'm writing. It's a complex page. The problem I'm having is with Internet Explorer not seeing mousedown event. Chrome and FF both see the event just fine but not IE.
I wrote a test page with the event and it worked just fine in IE. So my question is...
Is there a way through the developer tools to determine what is cancelling an event?
I have a suspicion that one of the many .js files I've included is cancelling the mousedown event and IE isn't seeing it anymore. Chrome and FF does though. So I'm not 100% that it's being cancelled but it's my only guess I can come up with.
Code is really irrelevant since it's all of jquery and bootstrap. However, I am playing with divs that are draggable and resizeable. That's why I need to use jquery. The bootstrap is used because I also have a wysiwyg editor on the page.
Please don't recommend click. I need mousedown. When the mouse is down the border around the draggable and resizeable div turns red and I have some code that selects that div to capture top, left, width, and height as it's being moved and resized.
If click was selected as the event, the user would have to click the div box first then click and hold to move it. That's not a user friendly interface.
Any help is greatly appreciated.
What do you exactly mean as cancel, .preventDefault() or .stopPropagation? If we are talking about preventDefault - you should still be able to add event listener to parent container and then see your event object - it might have some data to traceback. Alternative would to override jQuery .on method and see who actually subscribes to the event.
After little more thinking - add another listener BEFORE the malicious one, to do that insert document-ready handler with event binding right after jquery loading code. In your new mousedown handler try to override problematic method of the event.
UPDATE:
you should try to check all events attached to your element one by one. To do that - check this post jQuery find events handlers registered with an object
In short - try using jQuery._data( elem, "events" ); to see attached event listeners and inspect their code in your code base. After you find the reason it will be much easier to reach the desired functionality. Before that it is just a guesswork.

How can I make 'clickable' elements have selectable text on iOS touch devices?

I have an element (a div) that has a number of javascript touch and mouse handlers on it. Apparently, this means the element is 'clickable', and it seems you are not able to select text on clickable elements on the iPad.
Is there any way around this? The event handlers are necessary for this to work right, but I'd also like users to be able to select and copy the text.
One solution is to make the div contenteditable=true. The event handlers still work, and I'm able to long-press to bring up the selector. But this would create its own set of problems and I'd like to avoid contenteditable if I can.
After some tinkering, I've found a workaround solution: Put the mouse and click handlers on the window instead of the element. Then, check the event target in the handler to see if the element of interest is what was clicked.
Not ideal, but it seems to work. I'm able to long-press and create a selection on an iPad.

Drag or Edit, in a single click?

I have divs, which are made to textinput fields by a plugin. Also those divs are draggable.
Right now, I have reached, that if you drag the div, it gets dragged, and if you just click on it, it gets a ".focus()".
The problem is now, that if I click it once, i get a focus on it. But the cursor jumps to the beginning of the line.
What I want, is the cursor on the place, I clicked.
How can I do this with jquery? Thanks
EDIT (My JS Code):
$('.mydiv').click(function(){
//actually, it does not focus on "$(this)" but on a div inside ".mydiv" which
//is generated by the plugin
$(this).focus();
})
You could consider listening for mouseup and mousedown instead of click, which would help you distinguish between which event the user is performing. Like, if there is a mouse down event, and the user moves the mouse before a mouseup event, then you're in "drag" mode. If there's a mouseup event, and the user is not in "drag" mode, then the user has clicked, and you can fire a focus event.
That's the approach I would take without knowing more about what you're doing.
The truth is that you have a considerably more complex interface requirement than most, meaning you're going to have to give the computer more instructions to determine what to do :)

CSS/HTML: mouse down on cancel

I have a link being themed using CSS. I have up, over and down CSS properties applied which all work.
Problem is, when you hold down the mouse over a button, drag away then cancel by letting go, the down state is still being applied until you click again on some white-space.
You can see what I mean by doing the above on buttons 1, 2 and 4 here: http://jsfiddle.net/2vjbz/
How do you 'refresh' by not having to click again?
According to your CSS, I think this behavior is correct, but the problem is that mouse up event is not getting triggered and link element remains in active state. You can fix it using jQuery by invoking mouse up event for link element.
One method is to invoke it when mouse moves in pager div
$('#pager').bind("mousemove", function(event) {
$('#pager a').mouseup();
});
You might need to add conditions to make it perfect
EDIT:
You can experiment with it. This is one more method
http://jsfiddle.net/diode/2vjbz/18/
Here it cancels the drag event. Both of these worked for me.

Function Sortables (Mootools library)

I have a problem while using the Sortables() function (Mootools library).
this.sort=new Sortables(this.box,{
onStart: function(el){el.setStyles({'background':'#f0f0f0','opacity':1});},
onComplete: function(el){el.setStyle('background','none');this.setEditor();}.bind(this)
});
In fact, I have a DIV, which contains other DIV blocks which should be made sortable. And the 2nd level DIVs have SELECT tags inside.
The problem is these dropdown list does not drop when clicked. The click just falls to the parent DIV element and onStart functions starts. How can this problem be solved?
The prototype: http://jsfiddle.net/uCM2R/3/
mootools 1.12? heh.
right. so basically you want a click on the dropdown not to trigger the sort? this will be tricky as it uses a delegated event on the parent and it bubbles. also, scripting click events on a select is not reliable either so you cant stop the click event from propagating reliably - at least in 1.12. 1.3.2 is fine.
consider using the handles: "div.foo" option on the select whereby thats a child div that allows them to move things as opposed to the whole div.
http://jsfiddle.net/dimitar/uCM2R/4/
obviously in the div.foo handle you can put some icons that indicate moving. only they will act as the drag point for sorting, thus enabling you to work with selects w/o interference.
here it is in 1.3.2 as per your original spec/markup: http://jsfiddle.net/dimitar/uCM2R/6/
added a click handler for selects that stops the bubbling.

Categories