When I use jQuery for a simple click event it only works for links. Is there a way to make it work for spans etc:
$("span.clicked").live("click", function(e){alert("span clicked!")});
$("a.clicked").live("click", function(e){alert("link clicked!")});
The SPAN works in Safari but not Mobile Safari (on iPhone or iPad) whereas the A tag works in both.
I struggled with this as well. After lots of toying around and trying to figure out the problem, I came across a simple solution.
If you set the element's cursor to pointer, it magically works again with Jquery's live and the click event. This can just be set globally in the CSS.
You need to listen for the "touchstart" and "touchend" events. Add the listeners with jQuery...
$('span').bind( "touchstart", function(e){alert('Span Clicked!')} );
You may wish to listen for a touchstart and touchend so that you can verify that the element targeted when the finger touched is the same as the element targeted when the finger was removed.
I'm sure there is probably a better way to do it but that should work :)
Edit: There is a better way! See https://stackoverflow.com/a/4910962/16940
You actually don't need to use the touchstart or touchend event, so long as the 'span' tag (or anything other than an 'a' tag) has a css property of:
cursor:pointer
the click will register
You can also coax the browser to generate click events by adding an empty onclick attribute. For a belt-and-braces approach in case either approach stops working in any given iOS update, you could use something like this:
$("span.clicked").live("click", function(e){alert("span clicked!")})
.attr('onclick','')
.css('cursor','pointer');
(assuming you don't have any actual onclick attributes you don't mind obliterating)
You can add an empty onclick attribute, like so:
<span onclick=''>Touch or Click Me</span>
jQuery('span').live('click', function() { alert('foo'); });
I tried everything and none of the tricks worked. It turned out I couldn't get click events because I had a video element under my img. video elements apparently eat click events.
When targeting iOS you have to take the following into consideration: doing event delegation in jQuery like $(document).on('click', '.target-element', function (event) {...}); will not work. You have to add either onclick="" to the target HTML element or cursor: pointer to its styles.
Taken and adapted from http://gravitydept.com/blog/js-click-event-bubbling-on-ios:
It turns out that Safari on the iPhone does not support event delegation for click events, unless the click takes place on a link or input. Fortunately there are workarounds available.
That's the reason while the <a> tag works while <span> doesn't.
My approach to solve this misunderstanding on document.click.
Add into html after tag body next tag
<body>
<div id="overlaySection" onclick="void(0)"></div>
...
</body>
Some style for that tag
`#overlaySection {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0);
cursor: pointer;
visibility: hidden;
opacity: 0;
content: "";
}
#overlaySection.active {
opacity: 1;
visibility: visible;
}`
Some JQuery staff
// hide overlay on document click
$('#overlaySection').click(function(){
$(this).removeClass('active');
});
and the main thing to active this overlay
$('.dropdown > span').click(function() {
...
$('#overlaySection').addClass('active');
...
});
Hope this approach will be useful to someone. Happy coding!
Related
I'm trying to make the .wrapper div a clickable link that goes to the a.icon location. Also, when they hover over the .wrapper div the a.icon:hover state actives, not just when you hover over the icon itself.
Any help would be great.
This is what I have so far:
jQuery(document).ready(function($) {
$(".aca-question-container").hover(function() {
$(".icon").trigger("hover");
});
$(".aca-question-container").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
});
Example: http://jsbin.com/diyewivima/1/edit?html,css,js,output
In HTML5, you can wrap block elements such as your .wrapper div, within anchors. This is a rudimentary version of what I think you're looking for: http://jsbin.com/qegesapore/edit?html,css,js,output
I removed the JS you had there as I'm not sure it's necessary, and obviously some styling will be needing to be tweaked.
There shouldn't be any requirement for JS to achieve this really.
The hover state can still be applied to the icon as per:
.your-anchor:hover .icon {
background: #666;
}
As I commented, you can use jQuery and a class to achieve what you want. Below is the JS: (it must be inside the onload function)
$('div#wrapper').mouseenter(function(){
$('a.icon').addClass('hover');
});
$('div#wrapper').mouseleave(function(){
$('a.icon').removeClass('hover');
});
And, you must not forget, in your CSS you have to replace a.icon:hover with a.icon:hover, a.icon.hover, so that it emulates the hover state when the class is added. Like this:
a.icon:hover, a.icon.hover{
//CSS GOES HERE
}
For the CSS portion- propagating the hover is pretty easy. Just use .wrapper:hover .icon
as the hover effect selector. You can drop .icon:hover, too, since the parent is hovered when the child is hovered.
As for propagating the click down to it... also easy without jQ.
.wrapper:hover .icon{
color:#f00;
}
<div class="wrapper" onclick="this.getElementsByClassName('icon')[0].click()">
icon
testit
</div>
The error generated is the "there's not stackoverflow.com/google.com" error, showing that the link was followed. Slap https:// in front of the href and pull it out of an iframe and you'll be able to fully see it works.
EDIT:
bsod99's fix is cleaner. So long as you can rearrange the DOM and don't need to support ancient relics (pre-HTML5 spec browsers, like Firefox <3.5) (which you probably don't have to do), use his instead.
In a web app, I need to disable the default callout that mobile browsers shows when touching and holding ("long tap") on a touch target, such as an <img> or a link.
I am already using -webkit-touch-callout: none for iPhone and iPad. I tried -ms-touch-action:none and touch-action:none for IE, but this doesn't seem to work (tested on IE11, Windows Phone 8).
This post from the W3 mailing list suggests adding a listener for the "contextmenu" event in Javascript and calling e.preventDefault(). This does not seem to work either.
Any suggestions?
I did a bunch of research and as far as I can tell these are your two options:
Use a transparent <div> to cover the link/image
using a <div> with style="background: url(yourimage.png)" instead of <img src="yourimage.png">
The core problem is that mobile IE on Windows Phone doesn't properly handle preventDefault with contextmenu events. That is the proper way to do this and it works in every other browser. The contextmenu event is fired on WP IE but it actually happens when the long press context menu is dismissed. It should happen before even showing the menu so that you can prevent it.
Here are some of the other options I tried:
Events: I tried registering for every event and using e.preventDefault(), e.stopPropagation() and return false to prevent all of the default actions. JSBin example.
Use element:before or element:after to place an element on top of the link or image. I thought this might be able to automatically do what the transparent <div> does. Unfortunately the :before or :after content is part of the <a> so it is all clickable as well. Also, apprently <img> elements don't support :before or :after. JSBin example.
user-select: none
-ms-touch-action
-webkit-touch-callout: none
I even pinged someone on the IE team and he didn't know of a way.
I tried every "normal" or "elegant" option out there, but apparently IE11 mobile ignores every single one of them.
CSS properties: -webkit-touch-callout equivalent for IE
The preventDefault method Microsoft suggests: https://msdn.microsoft.com/en-US/en-en/library/jj583807(v=vs.85).aspx
Catching all touch events: Disabling the context menu on long taps on Android
A homebrewn oncontextmenu callback with stopPropagation and preventDefault
The only thing actually working is the old ugly div-over-image:
<div class="img-container">
<img src="path/to/image.jpeg" />
<div class="cover"></div>
</div>
CSS:
.img-container {
position: relative;
}
.cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Looking for any information on why a change event would fire on a without position or z-index, and why it wouldn't fire if those styles do exist. This problem occurs in Firefox only.
Change event does not fire on tab
<select style="position: relative; z-index:1"><option>1</option><option>2</option></select>
Change event does not fire on tab
<select><option>1</option><option>2</option>
Change event sample code (using jQuery
$('select').on('change', function(e){ console.log(e.type) });
Please see this CodePen for a working example.
It appears this problem can be resolved by setting position before the select receives focus, like so:
select { position: relative; }
select:focus { z-index: 1; }
I would still be curious if anyone has insight into why this happens when changing the position of the select on :focus
For anchor links i want to removes the dotted focus outlines for mouse events, but want to display them when for keyboard tabbed navigation.? Is there any javascript, jquery method?
Method should be compatible all A-grade browsers. including IE6.
Although all pure css methods to remove dotted lines do not works in IE 6.
But remember i want to remove dotted focus outlines only for mouse events, but want to display them when user use keyboard tabbed navigation.
Try to use jQuery/Javascript to apply style when mouseover. That way outline:none; will must likely to apply when it's a mouse click.
CSS:
.foo.bar:focus {
outline: none;
}
jQuery:
$(document).ready(function()
{
$(".foo").mouseover(function(){
$(this).toggleClass("bar");
}).mouseout(function(){
$(this).toggleClass("bar");
});
});
Unfortunately, this brings another problem: IE6 compaitability with multiple classes. This can be solved by using double div techniques to apply style with multiple classes.
While I understand the OP wanted to handle IE6 as well, I've posted this solution for anyone is not concerned with IE6 and who wants to allow keyboard navigation (focus rectangles still appear when tab is pressed) but hide the focus rectangle when the element is clicked (or enter key is pressed).
The .hide-focus-on-click is just a jQuery selector - replace it with whatever selector you need (e.g. "div#nav a" for all hyperlinks within )
CSS:
.no-focus-rectangle {
outline: none;
}
jQuery:
$(document).ready(function() {
$(".hide-focus-on-click").click(function(){
$(this).addClass("no-focus-rectangle");
}).blur(function(){
$(this).removeClass("no-focus-rectangle");
});
});
Is it possible to pass mouse clicks through an overlaying element:
<div style="background: url('img/rain.png'); z-index: 100; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0;"></div>
down to underlaying elements (paragraphs, images, links, etc)?
Or worded another way:
Is there any way of creating a purely aesthetic overlay/layer in HTML, CSS and/or JavaScript?
This can be solved using CSS:
div { pointer-events:none; }
Supported by IE 11+, Chrome, Firefox, Safari and Opera.
More details: https://developer.mozilla.org/en-US/docs/CSS/pointer-events
You could try to retrieve the mouse coordinates in your click event and then retrieve an element by hiding your overlay, use document.elementFromPoint(x, y) and then redisplay the overlay.
See this SO question for more info about elementFromPoint:
How do I find the DOM node that is at a given (X,Y) position? (Hit test)
I see you are using "rain.24.png" is the overlay animated? As in you are repositioning the images to simulate rain? If this is the case, then it might be best to stop/hide the animated on mousedown and then get the activate your function on the underlying elements using mouseup.
If that isn't the case, then use Vincent's answer to get the element, then call the associated function or use trigger to simulate the click
You could assign a mouse click event to the covering div, then iterate through all elements that you know might be underneath, inspecting their position, width, and height to see if that location of the mouse click was within their borders, and if it was, call their onclick event.
To make the subset of possible elements smaller, you could give clickable elements that might be under the div, a special class.