Don't Stop 'touchend' Propagation all the time
Closed this issue · 5 comments
AdamDash-2 commented
Here is a possible enhancement. This comes in handy when trying to make scrollable elements clickable. Only prevent default when the user didn't scroll up ro down. Here are the changes I made:
-
Comment out event.preventDefault(); in 'touchend' bind
// Add touch end listener
container.bind(_getTouchEventName($this, 'touchend'), function(event) {
// Prevent default behaviour
// event.preventDefault();
// Handle
_handleTouchEndEvent(event, $this);
}); -
Prevent default in _handleTouchEndEvent when the user didn't scroll. See "startTouchY != lastTouchY"
/* Handles touchend event. */
function _handleTouchEndEvent(event, instance) {
var container = _getMarkupCache(instance, 'container');
var startTouchY = _getTrackingData(instance, 'startTouchY');
var previousTouchY = _getTrackingData(instance, 'previousTouchY');
var lastTouchY = _getTrackingData(instance, 'lastTouchY');
var initialScrollPosition = _getTrackingData(instance, 'initialScrollPosition');
if (!startTouchY) {
// Nothing to do : touch was already processed
return;
}
// Only prevent the default event from
// happening when the user has actually
// scrolled
if (startTouchY != lastTouchY) {
event.preventDefault();
}
var pullHeaderHeight = _getPullHeaderHeight(instance);
if ((startTouchY < lastTouchY) && (container.scrollTop() < pullHeaderHeight)) {
_handlePullHeader(instance);
} else {
_handleInertia(instance);
}
// Reset data
_resetTouchTrackingData(instance);
}
zippy1978 commented
Thank you !
I just commited your enhancement !
reachpratheesh commented
Hi
i'm unable to get the click event to fire from an image within the scroller.
This is only when i open the application as a mobile-web-app on iphone.
Works alright if open in Safari.
Should i be doing anything specific to get it to work ?
Regards,
Pratheesh
zippy1978 commented
Hi,
Could you show me your code ?
reachpratheesh commented
Hi,
apologies for the delay in coming back.
please click on 'Club News' at this link http://clubapp.org/golf/index.html?clubid=4#pgNews
if i click the image for each news item in safari (desktop or phone) it opens in a popup.
but if i open it via webclip , then the click doesnt seem to work..
The full code for just the pgNews page is
<div data-role="page" id="pgNews" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="none">
<div class="ch" style="box-shadow:none;">
<div class="d1">
<a href="" data-rel="back" data-direction="reverse" ><img src="images/back.png"></a>
</div>
<div class="d2">
<img src="images/header/news-header.png" width="60px" height="60px">
</div>
<div class="d3">
<div class="d3-1">
Club News
</div>
<div class="d3-2">
Information/Photos/News
</div>
</div>
</div>
</div>
<div id="divAdBanner" height="40px" width="100%" >
<a href="<?php echo "$bannerurl"?>" data-rel="external">
<img style="display: block;" height="40px" width="100%" src=<?php echo "../appleicons/$clubid/banner_advert.png"?> />
</a>
</div>
<div id="divNewsScroll" data-scrollz="pull">
<table id="tblNews" border=0 cellpadding=0 cellspacing=0 width="100%">
<tbody>
</tbody>
</table>
</div>
<div data-role="popup" id="popupNews" data-position-to="window" data-overlay-theme="b" data-mini="true" data-theme="a" class="ui-corner-all" data-inset="true">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<div style="padding:10px 5px;">
<h3>Add News</h3>
<!--<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" data-theme="a">
<input type="radio" data-theme="a" name="radio-type" id="radio-view-a" value="1" checked="true" />
<label for="radio-view-a">Red</label>
<input type="radio" data-theme="a" name="radio-type" id="radio-view-b" value="2" />
<label for="radio-view-b">Orange</label>
<input type="radio" data-theme="a" name="radio-type" id="radio-view-c" value="3" />
<label for="radio-view-c">Green</label>
</fieldset>
</div>-->
<label for="txtNewsTitle" class="ui-hidden-accessible">Title:</label>
<input type="text" name="txtNewsTitle" id="txtNewsTitle" value="" placeholder="Title" data-theme="a" autocapitalize="On" maxlength=25 />
<label for="txtNewsDesc" class="ui-hidden-accessible">Description:</label>
<textarea name="txtNewsDesc" id="txtNewsDesc" value="" placeholder="" data-theme="a" maxlength=75 rows=4 ></textarea>
<!-- <button type="button" data-theme="a" onclick="addNews()" data-mini="true">Add</button>-->
</div>
</div>
<div data-role="footer" data-position="fixed" data-theme="none" data-id="footer" data-tap-toggle="false">
<table width=100% cellspacing=1 cellpadding=0>
<tr class="footerrow grid-4">
<td align="center">
<a href="#pgIndex" data-transition="slide" data-direction="reverse">
<div class="icon-footer home"></div>
</a>
</td>
<td align="center">
<a href="#pgAlerts" data-transition="slide">
<div class="icon-footer alerts">
<span class="count"></span>
</div>
</a>
</td>
<td align="center">
<a href="#pgCompetitions" data-transition="slide">
<div class="icon-footer livescoring"></div>
</a>
</td>
<td align="center" >
<a href="#pgContact" data-transition="slide">
<div class="icon-footer contact"></div>
</a>
</td>
</tr>
</table>
</div> <!--footer-->
<style>
.newsimage {
height: 70px;
}
.newstitle, .newstime, .newstext {
left: 10px;
padding-left: 10px;
text-shadow:none;
}
.newstitle{
font-size:16px;
font-weight:bold;
padding-top:5px;
color:white;
height:30px
top: 10px;
}
.newstime{
font-size:10px;
font-weight:bold;
top: 6px;
}
.newstext{
font-size:12px;
font-weight:normal;
padding-top:5px;
padding-bottom:5px;
color:grey;
top: 20px;
}
</style>
<script>
$( '#pgNews' ).die('pageshow').live( 'pageshow',function() {
dhx.Touch.disable();
});
$( '#pgNews' ).die('pageinit').live( 'pageinit',function() {
dhx.Touch.disable();
$('#divNewsScroll').bind('pulled', function() {
loadNews();
});
loadNews();
$('#btnAddNews').die('click').live('click',function(){
$('#txtTitle').val('');
$('#txtDesc').val('');
$( "#popupNews" ).popup('open');
});
});
function openImage(image){
imagesrc= $(image).attr('src');
$('<div>').simpledialog2({
mode: 'blank',
headerText: 'Some Stuff',
headerClose: true,
blankContent :
"<div style='padding:10px;'><img width='100%' style='max-height:400px;' src='"+imagesrc+"'>"+
// NOTE: the use of rel="close" causes this button to close the dialog.
"<a rel='close' data-role='button' href='#'>Close</a></div>"
});//simpledialog
}
function loadNews(){
$.mobile.loading( 'show', { theme: "b", text: "Loading...", textonly: false ,textVisible: true});
url="webservice.php?act=news&clubid="+sessionStorage.clubid+"&callback=?";
$.ajax({
url: url,
async: false,
dataType: 'json',
success: function(data) {
console.log(data);
$("#tblNews").find("tr").remove();
$.each(data.items,function(i,item){
if(item.image_url.length>2){
newsimage='../'+item.image_url;
}else{
newsimage='../images/club_news_generic_320x240.png';
}
newstitle=item.text;
newsdesc=item.details;
newstime=item.date_created.split(' ')[1].substring(0,5);
dt=toDate(item.date_created);
dtstr=dateFormat(dt,'ddd dd mmm yyyy');
//tr='<tr><td colspan=3><img src="images/horizontal_bar.png" width=100% height="10px"></td></tr>';
tr='<tr> ';
tr+='<td align="center" width="20%"><img class="clsNewsImage" onclick="openImage(this)" src="'+newsimage+'" height="70px" class="newsimage"></a></td>';
tr+='<td></td>';
tr+='<td> <table border=0 cellpadding=0 cellspacing=0 width="100%">';
tr+='<tr><td><div class="newstitle">'+newstitle+'</div></td></tr>';
tr+='<tr><td><div class="newstime">['+dtstr+']</div></td></tr>';
tr+='<tr><td><div class="newstext">'+newsdesc+'</div></td></tr>';
tr+='</table>';
tr+='</td>';
tr+='</tr>';
tr+='<tr><td colspan=3><img src="images/horizontal_bar.png" width=100% height="10px"></td></tr>';
$('#tblNews > tbody:last').append(tr);
});
setTimeout(function(){
$('#divNewsScroll').scrollz('hidePullHeader');
$.mobile.loading( 'hide');
},1000);
}
});
}
<?php /* function addNews(){
title=$('#txtNewsTitle').val();
description=$('#txtNewsDesc').val();
url="webservice.php?act=addnews&clubid="+sessionStorage.clubid+"&title="+title+"&description="+description+"&callback=?";
$.ajax({
url: url,
async: false,
dataType: 'json',
success: function(data) {
console.log(url);
loadNews();
}
});
$('#popupNews').popup('close');
}
*/
?>
</script>
</div> <!--pgNews-->
zippy1978 commented
Hi
I tried your application and it works fine on my iPad with Safari on iOS 6.
Maybe it´s a caching issue (happens really often with webclip).
Did you try removing and adding the webclip back ?
Regards
Gilles