javascript - 合并 OnMouseUp/Down 功能？-6ren

javascript - 合并 OnMouseUp/Down 功能？

转载作者：行者123 更新时间：2023-12-02 18:14:37

我有一个working tool (请参阅第一个代码块)，我想在其中包含单击并按住功能。

我想在按住左按钮时快速加，在按住右按钮时快速减。就像它已经具有的单击功能一样，但是是一个更快的选项。

我是一个完全的新手，所以非常感谢工作演示。谢谢。

代码:

<!DOCTYPE html>
<html>
<head>
<script>

var Alexander = 
     {
      Strength: "AlexanderStrengthVal",
      Bonus: "AlexanderRemainingBonusVal",
      Limits: {
        Strength: { 
          max: 80,
          min: 60
        }
              }
    };

function add(character, stat)
{
  var txtNumber = document.getElementById(character[stat]);
  var newNumber = parseInt(txtNumber.value) + 1;
  if(newNumber > character.Limits[stat].max) return;
  var BonusVal = document.getElementById(character["Bonus"]);
  if(BonusVal.value == 0) return;
  var newBonus = parseInt(BonusVal.value) - 1;
  BonusVal.value = newBonus; 
  txtNumber.value = newNumber;
}

function subtract(e, character, stat)
{
  e.preventDefault();
  var txtNumber = document.getElementById(character[stat]);
  var newNumber = parseInt(txtNumber.value) - 1;
  if(newNumber < character.Limits[stat].min) return;
    var BonusVal = document.getElementById(character["Bonus"]);
  var newBonus = parseInt(BonusVal.value) + 1;
  BonusVal.value = newBonus; 
  txtNumber.value = newNumber;
}

</script>  
</head>
<body>

  <table cellpadding='5' border='1' style="text-align:center; color:#ffffff; background-color:#444444; font-family:arial; font-size:14px">
   <tr>
      <td><b>Character</b></td>
      <td><b>Strength</b></td>
      <td><b>Spending Bonus</b></td>
   </tr>
    <tr>
      <td>Alexander</td>
      <td>
        <input 
        id="AlexanderStrengthVal" 
        type="text" value="60" 
        style="width:30px; border:none; color:#ffffff; background-color:transparent; text-align:center" 
        onfocus="this.blur()" 
        onClick="add(Alexander, 'Strength')" 
        onContextMenu="subtract(event, Alexander, 'Strength');"   
        />
      </td>

      <td>
        <input 
        id="AlexanderRemainingBonusVal" 
        type="text" 
        value="30" 
        style="width:30px; border:none; color:#ffffff; background-color:transparent; text-align:center" 
        />
      </td>

    </tr>
  </table>
</body>
</html>

最佳答案

如何将使用 .setTimeout()、.setInterval() 的计时器函数附加到 .onmousedown、.onmouseup, .onmouseout 钩子(Hook)，你尝试过这种方法吗？

或者尝试一下我用于类似任务的这个随时可用的功能。 fiddle .

//
// #Timer
//
// if you are unfamiliar with this code construct,
// ( I think it is called 'module' pattern IIRC )
//   this is base structure behind it:
//
//  defines/runs/sets_context/passes_arguments of anonymous function in one go
//  makes 'safe' ( private ) scope for module definition
//  module assignment is performed at the top
//  where it is easy to spot, rename, and shift around where needed
//  'factory' is a function that is supposed to return whatever the 'module' is
//  be it a function, object, or whatever,
//  and to assign it to arbitrary 'host' object,
//  providing room to rename it in case of naming collisions
//
//  ;(( function ( name, factory ) {
//
//    // this === module's context
//
//    this[name] = factory();
//
//  } ).call(
//
//    hostObject,        // object to attach module to
//   "customModuleName", // arbitrary name to use for it
//   function () {       // factory method that is supposed to define/return ( preferably independent ) piece of functionality
//
//     // save to do whatever is required in this scope
//     // without the impact on globals.
//     // declare identifiers, etc.
//     // whatever this function returns is assigned to context above
//
//     function doStuff () {
//       return Math.random() > .5;
//     }
//
//     var
//        _api =
//        {
//          props    : 1,
//          methods  : function () {
//            var stuff;
//            stuff = doStuff();
//            return stuff;
//          }
//        };
//
//     // ...code
//
//     // and return whatever the module's goal is
//     return _api;
//
//   }
//
//  ));
//
;(( function ( field, dfn ) {
  // add 'Timer' identifier to global scope
  this[field] = dfn();
} ).call(
 window,  // object to asign function to
 "Timer", // property name to use
 function () {

    // helpers and
    // shortcuts for use by code bellow

    var undef; // === undefined
    var aproto = Array.prototype;
    var _ = {

      // used to filter functions in timer api arguments
      isfn     : function ( o ) {
        return typeof o == "function";
      },

      // is provided parameter an object
      isobj    : function ( o ) {
        return o === Object( o );
      },

      // checks provided parameter,
      // returns false for: null, undefined, NaN
      // used to check if parameter is passed to timer methods
      isvalid  : function ( o ) {
        return ( o != null ) && ( o === o );
      },

      // removes array elements that match passed arguments
      // supposed to be used through .call/.apply function method:
      // _.gc.call( arr, "a", "b", "c" ), etc.
      // iterates array backward, '.splice-ing' it by 1 if current value
      // matches one of provided arguments
      // returns gc-ed array
      // used by .off() method to remove scheduled function(s)
      gc       : function () {

        // this === ( array ) target_array_to_cleanup

        // provided arguments[] to remove
        var togc = _.slice( arguments );

        for (
          var i = this.length;
          --i  >= 0;
          ( togc.indexOf( this[i] ) != -1 )
          && this.splice( i, 1 )
        );
        return this;
      },

      // empties passed array and returns it
      // used by .off() method to remove scheduled functions
      empty    : function ( arr ) {
        return ( arr.length = 0, arr );
      },

      // loops array
      // uses native .forEach if available
      // otherwise simulates the behaviour
      // returns iterated array
      // used by .fire() method to loop through registered function[] and
      // to execute them in order
      arreach  : ( function () {
        return ( typeof aproto.forEach == "function" )
              ? function ( arr, fn ) {
                  arr.forEach( fn );
                  return arr;
                }
              : function ( arr, fn ) {
                 for (
                    var i = 0,
                    l = arr.length;
                    i < l;
                    ( i in arr )
                    && fn.call( this, arr[i], i, arr ),
                    i++
                 );
                 return arr;
                };
      } )(),

      // substitues content of array ( arr )
      // with provided array's content ( arrnew )
      // returns modified array ( arr )
      // used by .start() method to quickly switch timer handler arguments
      // if any are passed to it
      arrsub   : function ( arr, arrnew ) {
        return ( aproto.push.apply( _.empty( arr ), arrnew ), arr );
      },

      // loops own properies of an object and retuns it
      // used by .off() method, ant _.init() function
      // to perform appropriate tasks ( object cleanup/property_assignment )
      owneach  : function ( obj, fn ) {
        for (
          var l in obj
        ) {
          _.owns( obj, l )
          && fn.call( obj, l, obj[l] );
        }
        return obj;
      },

      // asyns a function
      // returns new function based on provided one
      // that will run asyncrounously
      // used to async 'tick' handlers
      async    : function ( fn ) {
        return function () {
          var host   = this;
          var args   = _.slice( arguments );
          var origfn = fn;
          setTimeout(
            function () {
              origfn.apply( host, args );
            }
          );
          return this;
        };
      },

      // asigns properties of an object ( propsObj )
      // to provided ( obj ) object
      // used in couple of places to quickly assign properties/values to objects
      init     : function ( obj, propsObj ) {
        _.owneach(
          propsObj,
          function ( field, value ) {
            obj[field] = value;
          }
        );
        return obj;
      },

      // core {}.hasOwnProperty shortcut
      owns     : function ( obj, field ) {
        return Object( obj ).hasOwnProperty( field );
      },

      // native [].slice shortcut
      // used to turn dynamic arguments[] to real array
      slice    : function ( args, m, n ) {
        return aproto.slice.call( args, m, n );
      },

      // empties an object
      // used by .off() method to empty evHandler functions cache
      vacate   : function ( obj ) {
        for (
          var l in obj
        ) {
          try {
            _.owns( Object.prototype, l )
            || ( delete obj[l] );
          } catch( xc ) {}
        }
        return obj;
      }
    };

    // main function uses this strings
    // for subscribing/removing/executing handlers
    var timerEvent = {
      start : "tickStart",
      stop  : "tickStop",
      tick  : "tick",
      end   : "tickEnd"
    };
    return (function ( listener ) {


      // main timer function
      // @param1, float, optional, how often to fire 'tick' events, default == 1000, ( == 1sec )
      // @param2, integer, optional, how many times to fire 'tick' event, default == Infinity
      // returns, Object, object with following api:
      //
      //  registering functions for 'timerEvent' events:
      //
      // .on( evType, func )
      //   # caches a function for given event type ( of 'timerEvent' object )
      // .off( [ evType, func] )
      //   # unregisteres function for given event type
      //   # if no function is provided removes all functions registered for event 'evType'
      //   # if nothing is provided removes all registered functions
      // .fire( evType [, ...params_for_registered_handlers ] )
      //   # runs functions registered for given event type
      //   # passing provided arguments to them, if any
      //   # used internaly when .start() method is called
      //
      //  these are for controling timer object:
      //
      // .start([ ...params])
      //   # starts triggering 'tick' events updating internal state
      //   # passes provided parameters to triggerd functions,
      //   # ( available through .data property of object passed to handlers )
      // .stop()
      //   # pauses triggering 'tick' events ( if Timer object is in 'running state' )
      //   # triggers 'tickStop' event
      // .reset()
      //   # nulls internal state, stops dispatching 'ticks', resets counter
      //   # triggers 'tickEnd' event
      //
      //  these are for quering internal timer state:
      //
      // .currentCount()
      //   # how many times Timer fired so far
      //   # returns, integer
      // .delay()
      //   # gives timer's delay
      //   # returns, float
      // .repeatCount()
      //   # how many times timer will dispatch 'tick' events
      //   # returns, integer
      // .running()
      //   # 'is running' state
      //   # returns, boolean
      //
      return function ( delay, fireCount ) {
        return (function ( delay, fireCount ) {

            // preconfigured object that will handle 'tick' events
            var host = this;

            // timer object's internal state
            // used/updated by timer
            var timerState =
            {
              currentCount : 0,
              delay        : Math.abs( parseFloat(delay) )   || 1000,
              repeatCount  : Math.abs( parseInt(fireCount) ) || Infinity,
              running      : false,
              interval     : undef
            };

            // hack to reset .currentCount property asynchronously in .reset() method
            // without using it this way, ( by zeroing it directly, like: timerState.currentCount = 0 )
            // will make last 'tick' function call report: .currentCount() == 0,
            // instead of whatever the currentCount was
            // at the time the 'last tick' dispatch was performed
            //
            // because the handlers are runned asyncronously, and
            // because setting currentCount to 0 manualy ( synchronously )
            // will reset it before last function gets to be runned
            // reseting it asyncronously schedules a function to reset a property
            // making 'last tick' function report correct currentCount ( not 0 ).
            var zer0CurrentCount =
            _.async(
              function () {
                timerState.currentCount = 0;
              }
            );

            // holds arguments passed to last .start() call
            // uses these for further .start() calls if no new arguments are given
            // passes them to triggered functions
            var fireargs = [];

            // attaches timer api
            // ( .start, .stop, .reset, .currentCount, .delay, .repeatCount, .running )
            // to timer object
            _.init(
              host,
              {

                // handles starting event dispatch
                // if arguments are given, caches and
                // uses them for further calls
                // 'keeps an eye' on timer's configuration options
                // updating/aborting dispatch when/if necessary
                // triggering corresponding events and functions
                // does nothing if timer is already in 'active' state
                start: function () {
                  var startargs;
                  host.running()
                  || (
                    timerState.running = true,
                    ( startargs = _.slice( arguments ) ).length
                    && _.arrsub( fireargs, startargs ),
                    host.fire.apply(
                      host,
                      [timerEvent.start]
                      .concat( fireargs )
                    ),
                    timerState.currentCount += 1,
                    host.fire.apply(
                      host,
                      [timerEvent.tick]
                      .concat( fireargs )
                    ),
                    ( timerState.currentCount == timerState.repeatCount )
                    && host.reset()
                    || (
                      timerState.interval =
                      setInterval(
                        function () {
                          timerState.currentCount += 1;
                          host.fire.apply(
                            host,
                            [timerEvent.tick]
                            .concat( fireargs )
                          );
                          ( timerState.currentCount >= timerState.repeatCount )
                          && host.reset();
                        },
                        timerState.delay
                      )
                    )
                  );
                  return host;
                },

                // pauses running functions ( if timer{} is in 'running' state )
                // fires 'tickStop' event
                // passes arguments ( given in .start call ) to cached functions
                // updates timer's internal state
                stop: function () {
                  host.running()
                  && (
                    ( timerState.interval !== undef )
                    && (
                      clearInterval( timerState.interval ),
                      timerState.interval = undef
                    ),
                    timerState.running = false,
                    host.fire.apply(
                      host,
                      [timerEvent.stop]
                      .concat(fireargs)
                    )
                  );
                  return host;
                },

                // cancels event dispatch
                // nulls internal state
                // fires 'tickEnd' functions
                reset: function () {
                  ( timerState.interval !== undef )
                  && (
                    clearInterval( timerState.interval ),
                    timerState.interval = undef
                  );
                  timerState.running = false;
                  host.fire.apply(
                    host,
                    [timerEvent.end]
                    .concat( fireargs )
                  );
                  zer0CurrentCount();
                  return host;
                },

                // query timer's current state:

                currentCount: function () {
                  return timerState.currentCount;
                },
                delay: function () {
                  return timerState.delay;
                },
                repeatCount: function () {
                  return timerState.repeatCount;
                },
                running: function () {
                  return timerState.running;
                }

              }
            );
            return host;
        }).call( listener( {} ), delay, fireCount );
      }
    })(

      // function to configure an object to handle custom events
      // gives basic event handling functionality to provided object
      // attaches .on/.off/.fire methods to it,
      // used by main Timer function
      // ( to generate base objects for handling timer events )
      // passed as single ( private ) argument to code above
      function ( obj ) {

          if (
            _.isobj(obj)
          ) {

          // evHandler parameter object is used to store provided handlers in
          (function ( evHandlers ) {

              // plain object to configure for custom event handling
              var host = this;

              // attaches api ( .on, .off, .fire ) to provided object
              _.init(
                  host,
                  {

                    // if function is provided cache it in 'evHandlers' object
                    // ( to be called when needed )
                    // both, event type and function argument, are required
                    on: function ( evtype, fn ) {
                      if (
                        _.isvalid( evtype )
                        && _.isfn( fn )
                      ) {
                        _.owns( evHandlers, evtype )
                        && evHandlers[evtype].push( fn )
                        || ( evHandlers[evtype] = [fn] );
                      }
                      return host;
                    },

                    // deletes a function ( registered for evtype ) from evHandlers{}
                    // both parameters are optional
                    off: function ( evtype, fn ) {
                      if (
                        _.isvalid( evtype )
                      ) {
                        if (
                          _.owns( evHandlers, evtype )
                        ) {
                          _.isfn( fn )
                          && (
                            _.gc.call( evHandlers[evtype], fn ),
                            evHandlers[evtype].length
                            || ( delete evHandlers[evtype] ), 1
                          )
                          || (
                            _.empty( evHandlers[evtype] ),
                            delete evHandlers[evtype]
                          );
                        }
                      } else {
                        _.owneach(
                          evHandlers,
                          function ( evtype, fns ) {
                            _.empty( fns );
                          }
                        );
                        _.vacate( evHandlers );
                      }
                      return host;
                    },

                    // triggers functions registered for ( string ) evtype event
                    // passes 'event{}' to handlers
                    // it holds event type ( .type ),
                    //   data[] ( .data ) provided through .fire call,
                    //   object through which method is called ( .target )
                    //   and current execting function ( .handler )
                    // runs handlers asynchronusly by passing them to
                    // _.async() method before execution
                    fire: function ( evtype ) { // ( any )...args
                      if (
                        _.isvalid( evtype )
                      ) {
                        if (
                          _.owns( evHandlers, evtype )
                        ) {
                            var fireargs = _.slice( arguments, 1 );
                            _.arreach(
                              evHandlers[evtype],
                              function ( evhandler ) {
                              _.async( evhandler ).call(
                                host,
                                {
                                  type    : evtype,
                                  data    : fireargs,
                                  target  : host,
                                  handler : evhandler
                                }
                              );
                              }
                            );
                        }
                      }
                      return host;
                    }
                  }
              );
          }).call(
              obj, // passed object to apply event handling functionality to
              {}   // plain object to cache registered functions in
            );
          }

        // gives back passed/configued object
        return obj;

      }
    );
 }
));
//
// use:
//
// set event dispatch frequency 2x/sec
// run it 5x ( skip second argument to run functions indefinitely )
// check out the console
var timerObj = Timer( 1000 / 2, 5 );

// shortcut function to start the timer
function goTimer () {
  // start 'ticking' functions,
  // pass arbitrary arguments to handlers
  timerObj.start(
    Math.random(),
    ( new Date ).valueOf()
  );
}

// register functions for 'tick' cycle
timerObj
.on(
  "tickStart",
  function ( e ) {
    console.clear();
    console.log(
      e.type + ", \n",
      ( new Date ).valueOf()
    );
  }
)
.on(
  "tick",
  function ( e ) {
    // updateStuff();
    console.log(
      e.type + "#1, "
      , "#", this.currentCount(),", "
      , e.data
    );
  }
)
.on(
  "tick",
  function ( e ) {
    // updateStuff();
    console.log(
      e.type + "#2, "
      , "Math.random() < Math.random(): "
      , Math.random() < Math.random()
    );
  }
)
.on(
  "tickEnd",
  function ( e ) {
    console.log(
        e.type + ", \n"
       , "e.target === this: "
        , e.target === this
     , ", e.target === timerObj: "
        , e.target === timerObj
        , "."
    );
    setTimeout( goTimer, 10000 * Math.random() );
  }
);
//
setTimeout( goTimer, 2000 );
//
//
//
//

关于javascript - 合并 OnMouseUp/Down 功能？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19409507/

文章推荐： Javascript 对象数组 - 自杀式破坏

文章推荐： python - 使用装饰器和直接应用函数有什么区别吗？

文章推荐： f# - 反转部分函数参数顺序

文章推荐： javascript - 一个页面中有两个同名的js文件

javascript - 执行存在于输入值字段中的 javascript - JavaScript
我有一个 html 格式的表单: 我需要得到 JavaScript在value input 字段执行，但只能通过表单的 submit .原因是页面是一个模板所以我不控制它(不能有
javascript - JavaScript 代码片段正在破坏其他 JavaScript
我管理的论坛是托管软件，因此我无法访问源代码，我只能向页面添加 JavaScript 来实现我需要完成的任务。我正在尝试用超链接替换所有页面上某些文本关键字的第一个实例。我还根据国家/地区代码对这些
javascript - JavaScript 如何使新页面包含更多 JavaScript？
我正在使用 JS 打开新页面并将 HTML 代码写入其中，但是当我尝试使用 document.write() 在新页面中编写 JS 时功能不起作用。显然，一旦看到，主 JS 就会关闭。用于即将打开的
javascript - Javascript 引擎如何在浏览器中执行 Javascript？
提问不是为了解决问题，提问是为了更好地理解系统专家!我知道每当你将 javascript 代码输入 javascript 引擎时，它会立即由 javascript 引擎执行。由于没有看过Engi
javascript - 如何将 JavaScript 变量从一个 JavaScript 文件传递到另一个 JavaScript 文件？
我在一个文件夹中有两个 javascript 文件。我想将一个变量的 javascript 文件传递到另一个。我应该使用什么程序？最佳答案 window.postMessage用于跨文档消息。使
javascript - javascript 中的 javascript 输入问题
我有一个练习，我需要输入两个输入并检查它们是否都等于一个。如果是 console.log 正则 console.log false 我试过这样的事情: function isPositive(fir
javascript - 在加载其他 javascript 库的页面上嵌入 Javascript？
我正在做一个Web应用程序，计划允许其他网站(客户端)在其页面上嵌入以下javascript: 我的网络应用程序位于 http://example.org 。我不能假设客户端网站的页面有 JQue
javascript - 从 Javascript 内部调用 Javascript
目前我正在使用三个外部 JS 文件。我喜欢将所有三个 JS 文件合而为一。尽一切可能。我创建 aio.js 并在 aio.js 中 src="https://code.jquery.com/
javascript - AngularJS/javascript javascript 对象的特殊排序顺序
我有例如像这样的数组: var myArray = []; var item1 = { start: '08:00', end: '09:30' } var item2 = {
javascript - 在 Javascript 内部执行 Javascript？
所以我正在制作一个 Chrome 扩展，它使用我制作的一些 TamperMonkey 脚本。我想要一个“主”javascript 文件，您可以在其中包含并执行其他脚本。我很擅长使用以下行将其他 jav
javascript - 如何将变量从 javascript 移动到 javascript？
我有 A、B html 和 A、B javascript 文件。并且，如何将 A JavaScript 中使用的全局变量直接移动到 B JavaScript 中？示例 JavaScript) va
javascript - 从 javascript 调用 javascript
我需要将以下整个代码放入名为 activate.js 的 JavaScript 中。你能告诉我怎么做吗？ var int = new int({ seconds: 30, mark
javascript - 将变量值从一个 JavaScript 传递到另一个 JavaScript
我已经为我的 .net Web 应用程序创建了母版页 EXAMPLE1.Master。他们的 I 将值存储在 JavaScript 变量中。我想在另一个 JS 文件中检索该变量。示例1.大师:-
javascript - 有没有开源库可以在浏览器中使用 Javascript 来整理 Javascript？
是否有任何库可以用来转换这样的代码: function () { var a = 1; } 像这样的代码: function () { var a = 1; } 在我的浏览器中。因为我在 Gi
javascript - javascript 中的参数列表后缺少语法 javascript 错误 )
我收到语法缺失 ) 错误 $(document).ready(function changeText() { var p = document.getElementById('bidp
javascript - 第一个 JavaScript 完成后启动第二个 JavaScript
我正在制作进度条。它有一个标签。我想调整某个脚本完成的标签。在找到可能的解决方案的一些答案后，我想出了以下脚本。第一个启动并按预期工作。然而，第二个却没有。它出什么问题了？代码如下: HTML:
javascript - 为什么外部 javascript 库会阻止我页面上的 javascript？
这里有一个很简单的问题，我简单的头脑无法回答:为什么我在外部库中加载时，下面的匿名和onload函数没有运行？我错过了一些非常非常基本的东西。 Library.js 只有一行:console.log(
javascript - 如何区分代码内 javascript 和客户端 javascript
我知道 javascript 是一种客户端语言，但如果实际代码中嵌入的 javascript 代码以某种方式与在控制台上运行的代码不同，我会尝试找到答案。让我用一个例子来解释它: 我想创建一个像 Mi
javascript - 将 Javascript 内联到不显眼的 JavaScript？
我如何将这个内联 javascript 更改为 Unobtrusive JavaScript？谢谢! 感谢您的回答，但它不起作用。我的代码是: PHP js文件 document.getElem
javascript - 如何将 JavaScript 对象导出为 JavaScript？
我正在寻找将简单的 JavaScript 对象“转储”到动态生成的 JavaScript 源代码中的最优雅的方法。目的:假设我们有 node.js 服务器生成 HTML。我们在服务器端有一个对象x。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 合并 OnMouseUp/Down 功能？