CODEWITHSUNDEEP
javascriptandroidjquery-mobilecordova
Jebzaki
Jebzaki

Reputation: 163

How do I make a div both scrollable and clickable?

<div id="menuContainer"></div>

<div id="menuItemTemplate" class="menuItem">
    <div class="menuItemTitle"></div>
    <div class="menuItemImage"><img src="resources/BlackRightChevron.png"/></div>
</div>

The menuContainer div is dynamically appended with clones of the menuItemTemplate. The current click event:

menuContainer.addEventListener('click',menuContainer_click,false);

does not fire when menuContainer overflows in the y-axis. So I implemented some code found else where on stackoverflow.

Which makes it scrollable but the click events do not run (probably because of the preventDefault()s). Without them I figure every event would be registered as a click instead of a possible move.

Oh, I'm using jQuery mobile and it's UI as well. Is there any solution to my problem?

The changes I made as per the suggestion:

var scrollStartPosY=0;

document.getElementById(element).addEventListener("touchstart", function(event) {
    scrollStartPosY=this.scrollTop+event.touches[0].pageY;
    event.preventDefault();
},false);

document.getElementById(element).addEventListener("touchmove", function(event) {
    this.scrollTop=scrollStartPosY-event.touches[0].pageY;
    event.preventDefault();

    move = true;
},false);

document.getElementById(element).addEventListener("touchend", function(event) {
if(move)
    move = false;
else
    menuContainer_Click(event);

},false);

Upvotes: 0

Views: 95

Answers (2)

Jebzaki
Jebzaki

Reputation: 163

Decided that iScroll was just an easier solution. Though having difficulty with only one div not scrolling completely to the "bottom".

Upvotes: 0

WindsorAndy
WindsorAndy

Reputation: 247

I'm sure the preventDefaults are wiping out your click. In any case you're using click/mousedown/touchstart to scroll exclusively.

What I think you should do is register a touchend event to trigger whatever you intend to have the current click event do. You may want to verify whether there has been a scroll in the meantime and if so, ignore the touchend. That would differentiate between the two separate intentions of scrolling and clicking.

Upvotes: 1

Related Questions