e.preventDefault() - issues with applying it to all but one div - javascript

I've read quite a few things on stack related to this issue, but I can't seem to solve my problem.
Essentially, I'm using jQueryModal (http://jquerymodal.com/).
What I want to have happen is, when the modal is launched, aka:
$(".buttonSpacing").click(function() {
$("#page").modal();
}
the modal opens up as expected. Contained in a div in that modal is a contenteditable div. Basically, I want to prevent default on everything except the contenteditable div. When the modal closes, I want events to then be unbound.
Something like this:
$(".buttonSpacing").click(function() {
$("#page").modal();
$(':not(#myContentEditableDiv)').bind('mousedown',function(e)
{
e.stopPropagation(); // Tried with and without this line
e.preventDefault();
});
}
doesn't seem to work. #myContentEditableDiv loses the default functionality as well as everything else.
If a previous question has answered this, I guess I wasn't able to apply it correctly to my situation.
The reason for this is I want the cursor to always remain in the editable area, wherever it is they left it, even when I'm having them select things to dynamically add to the editable area, or if they accidentally click outside of it.
Given my situation, how can I make this happen?
Thanks for your help.
EDIT:
Here's a js fiddle showing the problem:
https://jsfiddle.net/7Lwudpr4/2/

The problem is that the mouse down event is propagating from the text area to the parent elements, which are then preventing the default action. To fix this issue, add the following:
$('#textArea').bind('mousedown', function(e) {
e.stopPropagation();
})
Updated JSFiddle: https://jsfiddle.net/gp43028d/1/
Note that you'll probably need to handle the mouseup events on your other elements, as they won't fire click events since preventDefault() is called on the mousedown event.

Related

.focus() not working on textarea in hover event

So I have this code here.
timeline.afterMilestonePrototypeCreated = function() {
$(MILESTONE_PROTOTYPE_SELECTOR).hover(function(e){
$(this).find('textarea').focus();
});
}
Which should focus the textarea element after it was created. Everything works fine, I've even checked if the event is being called, after creation and hovering. Every other code works, but I'm not able to focus that textarea element. After some googling I've tried to add a setTimeout, which didn't work neither.
Thanks!
SOLVED:
The parent element of the textarea is a dot, and after hovering the dot it becomes a bigger circle and than it's inner elements are becoming visible. The problem was, that when adding the timeout the duration I've set was to short so the css transition for making the textarea visible was still going that's way it wasn't focusing.
Instead of this:
$(this).find('textarea').focus();
Try this:
$(e.target).find('textarea').focus();
This may work, as long as $(this).find('textarea') works as expected:
timeline.afterMilestonePrototypeCreated = function() {
$(MILESTONE_PROTOTYPE_SELECTOR).hover(function(e){
e.preventDefault();
$(this).find('textarea').focus();
});
}
A hover event triggers a focus event, so preventing it will allow the manual focus to occur.

Bootstrap tooltip hidden by parent div

I'm using Bootstrap tooltips on my web app and they were being cut off by it's parent div.
To solve this I added data-container="body"
Hello
This solved the problem but a new problem came with it.
When I click on the anchor and navigate the tooltip won't disappear.
Has anyone come across this? Is there a simple way to solve this?
EDIT - JSFiddle similar to my problem http://jsfiddle.net/m9AX5/5/ except in my case the parent div doesnt get removed.
It happens because the mouseleave isn't detected.
One solution is to hide tooltip on click action:
$('#button').on('click', function () {
$(this).tooltip('hide')
})
Example:
http://jsfiddle.net/m9AX5/6/
Hope it helps.
As Andre mentioned, the mouseleave event isn't fired, so the tooltip doesn't get removed.
To do the same thing as hiding the tooltip, you can simply trigger the mouseleave event manually (Updated JSFiddle).
$(this).trigger('mouseleave');
While you haven't explained what happens when you click the element in your case, I would guess it's because the element was removed and the mouseleave event is never triggered. In this case, you should write an event listener and trigger the mouseleave element manually:
$('#anchor').click(function(){
$(this).trigger('mouseleave');
}

Blur event on select boxes and Firefox

I have the following situation:
One selectbox and a tooltip that appears when the user clicks on the box to select an option. To show the tooltip can be easily done with css (select:focus ~ .tooltip) or jquery using the focus() event.
When the user picks something the select box closes and the tooltip dissapears. This can be done with the change() event.
But there is one issue. If the user opens the selectbox and clicks somewhere else on the page, the list closes and in Firefox the blur event is not triggered right away, so the tooltip remains visible. If the user makes the second click outside of the select the blur event triggers and the tooltip dissapears.
Chrome and IE is ok, Firefox is not.
Do somebody know a workaround in Firefox?
thanks,
Istvan
After playing around with this for about half an hour, I'm afraid to say my input would be: no. And for the following reasons:
Firefox doesn't fire the blur event until the second click. This is evident from looking at the dropdown on the select, which remains blue.
Therefore a pure CSS solution would definitely never work
A JavaScript solution would also be next to impossible too, as the first click seems to go nowhere
I've checked this by trying to note body and document clicks, you'll see that neither fire the first time. In fact, neither does the select, so I have on which level that click registers
See my JSFiddle for my workings. Sorry! I guess it's just a FF issue.
$(document).click(function() {
console.log("document");
});
$("body").click(function() {
console.log("body");
});
$("select").click(function(e) {
e.stopPropagation();
console.log("select");
});
Edit: Sorry, posted an old JSFiddle.

Prevent firing the blur event if any one of its children receives focus

I have a div on a page that shows some info about a particular category (Image, Name etc).
When I click on the edit image it puts the category into edit mode which allows me to update the name. As you can see from the image below it shows that "Soup" is currently in edit mode, the others are in normal view mode. This all works as expected with the cancel / save buttons doing everything right. (I tried adding an image but wouldn't let me, need more love)
However once in edit mode if I click anywhere else on the page (Outside of the div) the expected result would be that the soup category would go back to view mode. Upon an event firing of some sort, this should also allow me to ask if they wanted to save changes.
So what I then decided to do is create an blur event on the "soups" parent div. This works as expected if I click anywhere on the page, however if I click on the inner element of the div it also causes the parents blur event to be fired, thus causing the category to go back to view mode.
So, is there a way to prevent the parent div from firing the blur event if any one of its children receive focus?
<div tabindex="-1" onblur="alert('outer')">
<input type="text" value="Soup" />
</div>
I just wrote the code without a compiler so not sure if that even works but with that hopefully you get the idea.
I'm using Knockout.js to update the GUI on the fly but that shouldn't effect this answer I wouldn't have thought.
I faced the same issue. This what worked for me.
handleBlur(event) {
// if the blur was because of outside focus
// currentTarget is the parent element, relatedTarget is the clicked element
if (!event.currentTarget.contains(event.relatedTarget)) {
.....
}
}
Enjoy :)
I've had to tackle this problem before. I am not sure if it is the best solution, but it is what I ended up using.
Since the click event fires after the blur, there is no (cross-browser, reliable) way to tell what element is gaining focus.
Mousedown, however, fires before blur. This means that you can set some flag in the mousedown of your children elements, and interrogate that flag in the blur of your parent.
Working example: http://jsfiddle.net/L5Cts/
Note that you will also have to handle keydown (and check for tab/shift-tab) if you want to also catch blurs caused by the keyboard.
I don't think there is any guarantee mousedown will happen before the focus events in all browsers, so a better way to handle this might be to use evt.relatedTarget. For the focusin event, the eventTarget property is a reference to the element that is currently losing focus. You can check if that element is a descendant of the parent, and if its not, you know focus is entering the parent from the outside. For the focusout event, relatedTarget is a reference to the element that is currently receiving focus. Use the same logic to determine if focus is fully leaving the parent:
const parent = document.getElementById('parent');
parent.addEventListener('focusin', e => {
const enteringParent = !parent.contains(e.relatedTarget);
if (enteringParent) {
// do things in response to focus on any child of the parent or the parent itself
}
});
parent.addEventListener('focusout', e => {
const leavingParent = !parent.contains(e.relatedTarget);
if (leavingParent) {
// do things in response to fully leaving the parent element and all of its children
}
});

Trigger a click when handling a focus event

I'm trying to determine why something like this doesn't work:
$('a').focus( function() {
$(this).click();
});
Background:
I'm trying to create a form in which tabbing to various elements (e.g. textboxes, etc.) will trigger links to anchors in a div, so that relevant text is scrolled into view as the form is being filled out.
Is there a better way to do this?
$('yourInput').on('focus', function(){
$('yourAnchor').trigger('click');
});
should work just fine, however you are likely to loose focus on the input field as the new element has been 'clicked'. I would recommend using the jQuery scrollTo plugin instead. That would enable you to do something like this:
$('yourInput').on('focus', function(){
$('messageArea').scrollTo('yourAnchor');
});
This was scrolling occurs in a nice animated fashion and without triggering browser events.
Part of the reason the code you posted may be failing is that, 1. anchors do not always have a focus event, 2. clicking it right after focusing may be redundant and not causing the change you are looking for.

Categories

Resources