We Keep Coding

Different behavior with pointerType mouse vs touch in dom-event

I am trying to develop a simple UI for my Web application where a client can click on an image and
a popup appears explaining the content of the image to the user. The way I intended this feature to
work is that by clicking on the image the popup appears and by clicking anywhere on the page, INCLUDING on that image,
the popup should close and you are free to click on it again to show it once more. On the desktop version, everything is working like a charm.
But on the other hand, when I switch to the mobile version of my UI in my browser, when I click on the image, the popup appears but when i click on it again,
an other popup just go stack on top of the other. If i click anywhere else on the screen, it close them but not when i click on the image like it should.
My question is: Does anyone knows why this type of behavior is happening and how i can fix this ?

Using jquery to capture click event on <li> element not working on iPad

On this page:
http://www.jwallacellc.com/fabric.htm
If you click any of the numbered blocks on a computer, a pop-up appears.
If you click them on an iPad, the hover state appears, then clicking a second time makes the pop-up appear.
I want the pop-up to appear on the first click on iPad.
Curiously, almost the exact same thing happens on this website's home page, but in that case the first click opens the pop-up without a problem:
http://www.jwallacellc.com
I don't understand why they are reacting differently. In both cases, the hover state is handled by CSS:
ul#home li:hover h2{height:160px;}
ul.interior li:hover h2{display:block;}
The clicks are handled by jQuery/Javascript:
$('#home li').click(function(){…});
$('ul.interior li').click(function(){…});
Is there some difference in my selectors that is causing iPad to not capture the click event the first time, on my interior page, but not the home page? Does iPad think because there is a hover state, it should show that the first time? But why would Javascript ignore the click event in that case? And in any event, my two pages are functioning differently for some reason.
Would appreciate any advice. Thank you!

iOS require an href="#" parameter on links

In my experience, this is just one of the differences between desktop and iPad web development. The iPad is listening for touch events, but can still handle click events (somewhat). The first touch is always a hover and the second a click, when you're listening for clicks.
You can get around this by listening for touch events using something like Zepto.js instead of jQuery, or a jQuery plugin for touch events, instead of listening to click events.
Or if you like, you can manually setup touch events with a tutorial like this.
I'm not sure why one of the pages actually works on the first touch, I've never been able to accomplish that with a click handler.

use jQuery to disable all clicking actions except scrollbar

I am trying to make a page COMPLETELY UNCLICKABLE (both right click and left click) and to display a message when someone clicks. Since I know that this will raise lots of questions such as
"why would anyone ever want to do this...this is stupid...then nobody
can navigate the site...and it doesn't protect your content
anyway...etc"
here is the explanation of my purpose. I have a page that is at the moment only a graphic mockup of what the finished website will eventually look like. No matter how many times I explain that the mockup is ONLY AN IMAGE and not a real navigable website, they still email me to say that they cannot click on the menus and links. Since it is a single page mockup, I want to pop up an alert() message (can't use a modal because you can't click to dismiss it if clicking is disabled) to let them know that they have clicked something non-functional. I am trying to do this in as few lines of code as possible, and have the following working at the moment:
<script>
$('html').mousedown(function(event) {
event.preventDefault();//To prevent following the link
alert('Demo Graphic Only...clicking on stuff will NOT work at this point.');
});
</script>
The issue is that when using .mousedown I capture the user trying to click on the browser scroll-bar to scroll down. I was surprised by this since it is not part of the actual PAGE CONTENT but rather a part of the BROWSER...but it is catching it nonetheless. I tried using .click in place of .mousedown however only seem to catch a normal (left) click in that case... Does anyone know how to easily (minimal lines of code if possible) capture the left AND right click event, but allow user interaction with the browser scrollbar?

Try this :
$(document).click(function(event) {
event.preventDefault();//To prevent following the link
console.log('Demo Graphic Only...clicking on stuff will NOT work at this point.');
});
This Function will be called when click is made on the page , not on the Scrollbars

Try to use
event.stopPropagation();
or
event.stopImmediatePropagation()

For people who come across this question, an alternative approach, good especially if you need to prevent mousedown specifically:
Put the scrolling content in a wrapper element and prevent mousedown only on the inner element. Set the wrapper element to overflow: auto; height: 100%;

How to avoid Chrome dragging content

I'm creating a simple javacript window manager with basic functions like all windows managers(moving, resizing, depth-sorting, etc).
I'm using events like mousedown and mouseup to know when to move the window or not.
However, sometimes, when I try to move the window, chrome hooks up on it and drags the "content"(I don't know the right word to use here, just imagine you're dragging an image from the browser to your desktop), like the image below.
(My cursor is there, it just doesn't appear on the screenshot).
Whenever this happens, chrome just simply don't trigger the mouseup event when i release the button, so the windows keeps following the mouse until I click again.
Is there any workaround to make chrome don't activate its dragging system?
Thanks.

Here's a link to another question very similar to yours. It seems to have a variety of answers. Disable Drag and Drop on HTML elements?

Try adding the draggable="false" attribute to relevant elements. By default <img> and <a> elements can be dragged, as can selected text (not much you can do about that one).
Alternatively, try adding ondragstart="return false;" to the document.

Autoclick where is mouse position with javascript

I have search this kind of post and i didnt find anything.
So my question is :
Is it possible after a time make an auto click on current position mouse?
Example: If mouse is over link blablaba.com click on link or mouse over is over another link so click on that link.
Sorry for my English.
Thank you.
I want to add code on my website, and after a time do autoclick on current position of mouse.

You have this all wrong. Events like "click" are used to trigger function calls. You don't need to trigger the event manually, just call the functions that were about to be called if someone triggered it.
Specifically, if you want the user to land on a new page(that happens when the user clicks a link) you can use redirects