Question

我使用impress.js作为插件，我试图覆盖键码定义而不改变impress.js本身（否则在下次更新期间，更改将被覆盖。）

这是在impress.js中实现键码定义的方式：

    // KEYBOARD NAVIGATION HANDLERS

    // Prevent default keydown action when one of supported key is pressed.
    document.addEventListener( "keydown", function( event ) {
        if ( event.keyCode === 9 ||
           ( event.keyCode >= 32 && event.keyCode <= 34 ) ||
           ( event.keyCode >= 37 && event.keyCode <= 40 ) ) {
            event.preventDefault();
        }
    }, false );


        if ( event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) {
            return;
        }

        if ( event.keyCode === 9 ||
           ( event.keyCode >= 32 && event.keyCode <= 34 ) ||
           ( event.keyCode >= 37 && event.keyCode <= 40 ) ) {
            switch ( event.keyCode ) {
                case 33: // Page up
                case 37: // Left
                case 38: // Up
                         api.prev();
                         break;
                case 9:  // Tab
                case 32: // Space
                case 34: // Page down
                case 39: // Right
                case 40: // Down
                         api.next();
                         break;
            }

            event.preventDefault();
        }
    }, false );

这就是我试图覆盖它们的定义（在一个单独的js文件中，但代码是在impress.js启动后执行的）：

空格键应调用暂停

其他键应无效。

//绑定键盘事件.. document.addEventListener（'keyup'，function（event）{

if (event.keyCode === 9 || (event.keyCode >= 32 && event.keyCode <= 34) || (event.keyCode >= 37 && event.keyCode <= 40)) {
  switch (event.keyCode) {
    // ..left key arrow, go to previous slide
    case 37:
      return deck.prev();
      break;
      // ..right key arrow, go to previous slide
    case 39:
      return deck.next();
      break;
    case 32: // Space
      return deck.pause();
      break;
    case 9: // Tab
    case 33: // Page up
    case 38: // Up
    case 34: // Page down
    case 40: // Down
       return;
  }

  event.preventDefault();
}

}，false）;

但是，键的功能不会改变。

是否可以覆盖密钥代码，我该如何实现？

Answer 1

addEventListener不会覆盖以前添加的事件侦听器，这是使用on * event属性/属性的优势之一。

为了做你想做的事，你需要添加你自己的impress:init事件监听器，在impress添加的事件之前，做与库相同的设置，改变需要改变的东西，然后致电stopImmediatePropagation()。

stopImmediatePropagation将阻止执行任何其他类型的侦听器，这意味着不会触发impress的impress:init事件侦听器。

//code executed before impress.js is loaded
(function(document,window){
  "use strict";
   var throttle = function( fn, delay ) {
     var timer = null;
     return function() {
       var context = this, args = arguments;
       clearTimeout( timer );
       timer = setTimeout( function() {
         fn.apply( context, args );
       }, delay );
     };
  };

  document.addEventListener( "impress:init", function( event ) {
    event.stopImmediatePropagation();

    //parts of init code

    document.addEventListener('keyup', function(event) {
      if (event.keyCode === 9 || (event.keyCode >= 32 && event.keyCode <= 34) || (event.keyCode >= 37 && event.keyCode <= 40)) {
        switch (event.keyCode) {
          case 37:
            return deck.prev();
            break;
          case 39:
            return deck.next();
            break;
          case 32: // Space
            return deck.pause();
            break;
          case 9: // Tab
          case 33: // Page up
          case 38: // Up
          case 34: // Page down
          case 40: // Down
            return;
        }
        event.preventDefault();
      }
    }, false);

    //other part of init code
  });

})(document, window)

演示

＆＃13;

<script>
( function( document, window ) {
    "use strict";
    var throttle = function( fn, delay ) {
        var timer = null;
        return function() {
            var context = this, args = arguments;
            clearTimeout( timer );
            timer = setTimeout( function() {
                fn.apply( context, args );
            }, delay );
        };
    };

    document.addEventListener( "impress:init", function( event ) {
        event.stopImmediatePropagation();
        var api = event.detail.api;
        document.addEventListener( "keydown", function( event ) {
            if ( event.keyCode === 9 ||
               ( event.keyCode >= 32 && event.keyCode <= 34 ) ||
               ( event.keyCode >= 37 && event.keyCode <= 40 ) ) {
                event.preventDefault();
            }
        }, false );
        document.addEventListener( "keyup", function( event ) {
            if ( event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) {
                return;
            }

            if (event.keyCode === 9 || (event.keyCode >= 32 && event.keyCode <= 34) || (event.keyCode >= 37 && event.keyCode <= 40)) {
              switch (event.keyCode) {
                // ..left key arrow, go to previous slide
                case 37:
                  //return deck.prev();
                  console.log("deck.prev() would have been called");
                  break;
                  // ..right key arrow, go to previous slide
                case 39:
                  //return deck.next();
                  console.log("deck.next() would have been called");
                  break;
                case 32: // Space
                  //return deck.pause();
                  console.log("deck.pause() would have been called");
                  break;
                case 9: // Tab
                case 33: // Page up
                case 38: // Up
                case 34: // Page down
                case 40: // Down
                   return;
              }

              event.preventDefault();
            }
        }, false );

        document.addEventListener( "click", function( event ) {
            var target = event.target;
            while ( ( target.tagName !== "A" ) &&
                    ( target !== document.documentElement ) ) {
                target = target.parentNode;
            }

            if ( target.tagName === "A" ) {
                var href = target.getAttribute( "href" );
                if ( href && href[ 0 ] === "#" ) {
                    target = document.getElementById( href.slice( 1 ) );
                }
            }

            if ( api.goto( target ) ) {
                event.stopImmediatePropagation();
                event.preventDefault();
            }
        }, false );

        document.addEventListener( "click", function( event ) {
            var target = event.target;

            while ( !( target.classList.contains( "step" ) &&
                      !target.classList.contains( "active" ) ) &&
                      ( target !== document.documentElement ) ) {
                target = target.parentNode;
            }

            if ( api.goto( target ) ) {
                event.preventDefault();
            }
        }, false );

        document.addEventListener( "touchstart", function( event ) {
            if ( event.touches.length === 1 ) {
                var x = event.touches[ 0 ].clientX,
                    width = window.innerWidth * 0.3,
                    result = null;

                if ( x < width ) {
                    result = api.prev();
                } else if ( x > window.innerWidth - width ) {
                    result = api.next();
                }

                if ( result ) {
                    event.preventDefault();
                }
            }
        }, false );

        window.addEventListener( "resize", throttle( function() {
            api.goto( document.querySelector( ".step.active" ), 500 );
        }, 250 ), false );
  
    }, false );
} )( document, window );
</script>
<link rel="styleshee" href="https://cdn.rawgit.com/impress/impress.js/master/css/impress-demo.css">

<div id="impress">
    <div id="bored" class="step slide" data-x="-1000" data-y="-1500">
        <q>Aren’t you just <b>bored</b> with all those slides-based presentations?</q>
    </div>
    <div class="step slide" data-x="0" data-y="-1500">
        <q>Don’t you think that presentations given <strong>in modern browsers</strong> shouldn’t <strong>copy the limits</strong> of ‘classic’ slide decks?</q>
    </div>
    <div class="step slide" data-x="1000" data-y="-1500">
        <q>Would you like to <strong>impress your audience</strong> with <strong>stunning visualization</strong> of your talk?</q>
    </div>
    <div id="title" class="step" data-x="0" data-y="0" data-scale="4">
        <span class="try">then you should try</span>
        <h1>impress.js<sup>*</sup></h1>
        <span class="footnote"><sup>*</sup> no rhyme intended</span>
    </div>
    <div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
        <p>It’s a <strong>presentation tool</strong> <br/>
        inspired by the idea behind <a href="http://prezi.com">prezi.com</a> <br/>
        and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.</p>
    </div>
    <div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
        <p>visualize your <b>big</b> <span class="thoughts">thoughts</span></p>
    </div>
    <div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
        <p>and <b>tiny</b> ideas</p>
    </div>
    <div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6">
        <p>by <b class="positioning">positioning</b>, <b class="rotating">rotating</b> and <b class="scaling">scaling</b> them on an infinite canvas</p>
    </div>
    <div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6">
        <p>the only <b>limit</b> is your <b class="imagination">imagination</b></p>
    </div>
    <div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
        <p>want to know more?</p>
        <q><a href="http://github.com/bartaz/impress.js">use the source</a>, Luke!</q>
    </div>
    <div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
        <p>one more thing...</p>
    </div>
    <div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
        <p><span class="have">have</span> <span class="you">you</span> <span class="noticed">noticed</span> <span class="its">it’s</span> <span class="in">in</span> <b>3D<sup>*</sup></b>?</p>
        <span class="footnote">* beat that, prezi ;)</span>
    </div>
    <div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10"></div>
</div>

<script src="https://cdn.rawgit.com/impress/impress.js/master/js/impress.js"></script>
<script>impress().init();</script>

＆＃13;

Answer 2

更新以反映此功能现在也位于主要impress.js分支中。

在impress.js的最新版本中，您在此处讨论的关键导航代码将移至单独的plugin src/plugins/navigation。如果您想要禁用它并提供自己的功能，可以在build.js中轻松完成。

没有运行时方法来禁用插件，但是如果你想发送这样的拉取请求，我很乐意合并它。这可以采取以下形式：

<div id="impress" data-navigation="off" ... >

最后，我还可以想象导航插件允许用户指定键绑定。但是，由于impress.js目前不支持使用配置文件（并且不能立即明确它应该如何做），因此每个演示文稿都必须在演示文稿中指定其键绑定。

我希望你会发现这些选项比试图从外部破解不可插拔的上游版本更清晰。

在插件中覆盖event.keycode（impress.js）而不更改插件

2 个答案: