关于 .triggerHandler('onLeave')

来源：3-2 静态页思路验证-组件切换

BH92182

2016-04-12

$('.component', $(this)).triggerHandler('onLeave');

第一页有两个.component, 使用.triggerHandler好像阻止了第二个.component的显示。也就是只能使用 return false 来实现了？是这样吗？

写回答

4回答

qq_大叔在厨房_ilxL47

2016-04-24

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <div class="bar">为什么</div>
       <div class="bar">真的吗？</div>
       <div class="bar">呵呵哒</div>
       <div id="kk">
           点击我
       </div>
       <script src="js/lib/jquery.js" type="text/javascript" charset="utf-8"></script>
       <script>
           $(function(){
               $("#kk").on("click",function(){
                   $("body").find('.bar').triggerHandler('onload')
               })
               $(".bar").on("onload",function(){
                   console.log($(this).html())
               })
           })
       </script>
   </body>
</html>

这里只能console.log出第一个元素

Lyn_Tech

2016-04-24

看代码没有错。你加下断点看看

$(function (){
            $('#h5').fullpage({
                sectionsColor: ['#D63C3C', '#9ED63C', '#3C84D6'],
                onLeave: function (index, nextIndex, direction) {
                    $('.page', '#h5').eq(index - 1).trigger('onLeave');
                },
                afterLoad: function (anchorLink, index) {
                    $('.page', '#h5').eq(index - 1).trigger('onLoad');
                }
            });
 
            $('.page').on('onLeave', function (e) {
                console.log($(this).attr('id'), '===>>', 'onLeave');
                $('.component', $(this)).triggerHandler('onLeave');
            });
             
            $('.page').on('onLoad', function () {
                console.log($(this).attr('id'), '===>>', 'onLoad');
                 debugger ; // 输出 $('.component', $(this)) 查看 slogan是否在  .component 中
                $('.component', $(this)).triggerHandler('onLoad');
            });
             
            $('.component').on('onLoad', function (e) {
                   debugger ; // 手动停止，如果slogan 执行到了此步，可以直接使用 $(this).show() 来显示 slogan
                $(this).fadeIn();
                // return false;
            })
             
            $('.component').on('onLeave', function (e) {
                $(this).fadeOut();
                // return false;
            })
        });

BH92182

提问者

2016-04-15

$(function (){
            $('#h5').fullpage({
                sectionsColor: ['#D63C3C', '#9ED63C', '#3C84D6'],
                onLeave: function (index, nextIndex, direction) {
                    $('.page', '#h5').eq(index - 1).trigger('onLeave');
                },
                afterLoad: function (anchorLink, index) {
                    $('.page', '#h5').eq(index - 1).trigger('onLoad');
                }
            });

            $('.page').on('onLeave', function (e) {
                console.log($(this).attr('id'), '===>>', 'onLeave');
                $('.component', $(this)).triggerHandler('onLeave');
            });
            
            $('.page').on('onLoad', function () {
                console.log($(this).attr('id'), '===>>', 'onLoad');
                $('.component', $(this)).triggerHandler('onLoad');
            });
            
            $('.component').on('onLoad', function (e) {
                $(this).fadeIn();
                // return false;
            })
            
            $('.component').on('onLeave', function (e) {
                $(this).fadeOut();
                // return false;
            })
        });

<div id="h5">
            <div class="page section" id="page-1">
                 <!--当滚回第一页时，logo会显示出来，但是slogan不会显示-->
                <div class="component logo">
                    logo
                </div>
                <div class="component slogan">
                    slogan
                </div>
            </div>
            <div class="page section" id="page-2">
                <div class="component desc">
                    desc
                </div>
            </div>
             <div class="page section" id="page-3">
                <div class="component bar">
                    bar                    
                </div>
            </div>
        </div>

Lyn_Tech

2016-04-14

不太确定你的问题是什么。 trigger 和 triggerHandler 是不同的。 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。触发执行的返回是 false ，即 return false ，就会阻止浏览器默认的操作。

qq_大叔在厨房_ilxL47

我也是同样的问题第一个会有动画后面的状态没发生变化我的理解是 $(this).find('.component') 得到的是一个类为’component‘的DOM数组要每个DOM都执行triggerHandler('onLeave')是不是要遍历$(this).find('.component') 数组使里面的元素依次执行triggerHandler('onLeave')才行而$(this).find('.component').triggerHandler('onLeave')只会使第一个执行triggerHandler('onLeave')后面的元素就没效果？

2016-04-24

共2条回复

Web App用组件方式开发全站

用HTML5/CSS3/JS流行技术，实现移动端可视化数据报告

3164 学习 · 517 问题

查看课程

相似问题

关于 .triggerHandler()

回答 1

为什么要自定义onLoad和onLeave事件

回答 4

如果命名不一样不就不会有死循环了吗

回答 1

为什么可以用on('leave')事件

回答 1

关于fullpage里面的onLeave和afterLoad不太明白

回答 2

打开慕课网App查看更多内容