老师帮我看下为什么触发不到监听的事件

老师帮我看下为什么触发不到监听的事件

<div class="consumer">
   <div class="container">
       <div class="consumer-group">
           <span class="consumer-group-title">消费者保障</span>
           <div class="consumer-group-detail">
               <a href="###" target="_blank" class="link">保障范围</a>
               <a href="###" target="_blank" class="link">保障范围</a>
               <a href="###" target="_blank" class="link">保障范围</a>
               <a href="###" target="_blank" class="link">保障范围</a>
           </div>
       </div
       ><div class="consumer-group">
           <span class="consumer-group-title">消费者保障</span>
           <div class="consumer-group-detail">
               <a href="###" target="_blank" class="link">保障范围</a>
               <a href="###" target="_blank" class="link">保障范围</a>
               <a href="###" target="_blank" class="link">保障范围</a>
               <a href="###" target="_blank" class="link">保障范围</a>
           </div>
       </div
       ><div class="consumer-group">
           <span class="consumer-group-title">消费者保障</span>
           <div class="consumer-group-detail">
               <a href="###" target="_blank">保障范围</a>
               <a href="###" target="_blank">保障范围</a>
               <a href="###" target="_blank">保障范围</a>
               <a href="###" target="_blank">保障范围</a>
           </div>
       </div
       ><div class="consumer-group">
           <span class="consumer-group-title">消费者保障</span>
           <div class="consumer-group-detail">
               <a href="###" target="_blank">保障范围</a>
               <a href="###" target="_blank">保障范围</a>
               <a href="###" target="_blank">保障范围</a>
               <a href="###" target="_blank">保障范围</a>
           </div>
       </div>
   </div>
</div>


//consumer
var consumer={};
consumer.$doc=$(document);
consumer.$consumer=$(".consumer");
//是否出现在可视区域
consumer.isVisible = function ($elem) {
   //页面可视区域的高度加页面滚动高度大于元素上边沿距离顶部高度时,元素位于可视区域之外---下边界
   //页面滚动高度小于元素自身高度以及页面滚动高度之和----上边界
   return (floor.$win.height() + floor.$win.scrollTop() > $elem.offset().top);
}
consumer.timeToShow = function ($elem) {
   $elem.each(function (index, ele) {
       if (consumer.isVisible($(ele))) {
           console.log(1)
           consumer.$consumer.trigger("consumer-show");
       }
   })
}
consumer.timeToShow(consumer.$consumer);
consumer.$consumer.on('consumer-show',function (e) {
   console.log(e.type)
   console.log(1)
})
// console.log(consumer.isVisible(consumer.$consumer));

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
好帮手慕久久 2020-06-03 11:29:50

同学你好,trigger是触发自定义事件,on是监听该事件。如下:

http://img1.sycdn.imooc.com//climg/5ed718fc09c556eb06910348.jpg

trigger只要调用就会触发自定义事件,不需要写在别的事件中,如下:

http://img1.sycdn.imooc.com//climg/5ed7191009c9fdaa06660261.jpghttp://img1.sycdn.imooc.com//climg/5ed7191309caf02b05540152.jpg

祝学习愉快!

好帮手慕久久 2020-06-03 10:57:47

同学你好,代码中的问题如下:

1. 需要增大页面的高度,让页面出现滚动条,这样才可以模拟,滚动到“consumer”时,触发它的“consumer-show”事件。可以使用一个空的div,增大页面的高度:

http://img1.sycdn.imooc.com//climg/5ed710f309e9e35505540306.jpg

2.  isVisible方法中使用了不存在的对象“footer”,导致该方法无法正确获取到结果,需要做如下更改:

http://img1.sycdn.imooc.com//climg/5ed7110d0908855a12770194.jpg

3. 页面滚动过程中,也需要判断该元素是否显示了,所以需要在window的滚动事件中触发timeToShow方法,如下:

http://img1.sycdn.imooc.com//climg/5ed7114d096428a908250629.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快!

  • 提问者 vivi_li #1
    trigger监听的事件必须通过另外事件进行触发么?
    2020-06-03 11:10:02
提问者 vivi_li 2020-06-03 09:54:48

我用document监听也没有成功

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师