ITPub博客

首页 > 应用开发 > > 闭包的问题中执行touchmove事件的问题

闭包的问题中执行touchmove事件的问题

作者:古月雪 时间:2019-07-16 14:21:10 0 删除 编辑

要求点击图片出现弹窗 弹窗出现的时候,根据图片高 > 屏幕高,来判断是否阻止底层滚动,

现在问题是,当我第一次点击出现弹出层时候,图片高度可以获取到 判断也没问题

 但是当我点击一个长图的时候,执行touchmove事件时候,图片高度出现了2种分别为第一次的弹窗图片240 跟最新的图片高度,

我是在这里 执行完弹出层后执行回调函数getPopImgHeight,

 我就不明白为什么再点击的时候回有上次的变量 ,

而且 应该再出现弹出层的时候 不应该重新获取img的高度 吧上一个覆盖了吗?求大神帮忙解答下。。谢谢

 <div id="popup-box">  
 <div id="popclose"></div>   
 <div class="imgbox" id="imgbox">       
 <img src="">    
 </div>  
 <div class="h6box in"> </div> </div>
var popBox = $('#popup-box'),   
 popImg = popBox.find('img'),  
  popText = popBox.find('.h6box');
var screenH = $(window).height();
function getPopImgHeight() {    
var imgHeight = popImg.height(); 
console.log('原来的'+imgHeight);  
  $('#imgbox').on('touchstart', function() {      
  popText.attr('class', 'h6box out');    });  
  $('#imgbox').on('touchmove', function() {      
  console.log('imgHeight:' + imgHeight);     
   console.log(imgHeight < screenH);
if (imgHeight < screenH) { // 阻止滚动           
  console.log('1')             // return false;        }
 else { // 允许滚动           
  console.log('2')             // return true;        }    
    });}
  $('.baoImgQ').on('click', 'a', function() {    
   stopDefault();   
 var imgLen = $(this).find('img').length;  
  if (imgLen > 0) {      
  var imgSrc = getRealSrc($(this).attr('href'));    
  var hText = $(this).parent().next().next('h6').text();     
  console.log(imgSrc + ';' + hText);        
  addPopContent(imgSrc, hText);        
  popBox.fadeIn
('fast', getPopImgHeight);    }});// 关闭时候重置$
('#popclose').on('click', function() 
{    popBox.fadeOut('fast');  
  popImg.attr('src', '');   
 popText.text('').attr('class', 'h6box in').show();});

function getPopImgHeight() {

    var imgHeight = popImg.height();

    console.log('原来的'+imgHeight);

    $('#imgbox').on('touchstart', function() {

        popText.attr('class', 'h6box out');

    });

    $('#imgbox').on('touchmove', function() {

        console.log('imgHeight:' + imgHeight);

        console.log(imgHeight < screenH);

        if (imgHeight < screenH) { // 阻止滚动

             console.log('1')

             // return false;

        } else { // 允许滚动

             console.log('2')

             // return true;

        }

    });

}

$('.baoImgQ').on('click', 'a', function() {

    stopDefault();

    var imgLen = $(this).find('img').length;

    if (imgLen > 0) {

        var imgSrc = getRealSrc($(this).attr('href'));

        var hText = $(this).parent().next().next('h6').text();

        console.log(imgSrc + ';' + hText);

        addPopContent(imgSrc, hText);

        popBox.fadeIn('fast', getPopImgHeight);

    }

});


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/3711/viewspace-3165036/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-07-09

  • 博文量
    160
  • 访问量
    1173