Javascript 是否合并OnMouseUp/Down功能？
我有一个（请参阅第一个代码块），我想在其中包括点击保持功能 我想在按住左键时快速加，在按住右键时快速减。就像它已经拥有的单击功能一样，它还有一个更快的选项 我是一个完全的新手，所以非常感谢工作演示。多谢各位 代码：Javascript 是否合并OnMouseUp/Down功能？,javascript,function,events,onmousedown,onmouseup,Javascript,Function,Events,Onmousedown,Onmouseup,我有一个（请参阅第一个代码块），我想在其中包括点击保持功能 我想在按住左键时快速加，在按住右键时快速减。就像它已经拥有的单击功能一样，它还有一个更快的选项 我是一个完全的新手，所以非常感谢工作演示。多谢各位 代码： <!DOCTYPE html> <html> <head> <script> var Alexander = { Strength: "AlexanderStrengthVal", Bonus: "
<!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>
var Alexander=
{
力量：“AlexanderStrengthVal”，
奖励：“AlexanderRemainingBonusVal”，
限制：{
人数：{
最高：80，
最低：60
}
}
};
函数添加（字符、状态）
{
var txtNumber=document.getElementById（字符[stat]）；
var newNumber=parseInt（txtNumber.value）+1；
if（newNumber>character.Limits[stat].max）返回；
var BonusVal=document.getElementById（字符[“奖金]）；
如果（BonusVal.value==0）返回；
var newBonus=parseInt（BonusVal.value）-1；
BonusVal.value=newBonus；
txtNumber.value=newNumber；
}
函数减法（e，字符，统计）
{
e、 预防默认值（）；
var txtNumber=document.getElementById（字符[stat]）；
var newNumber=parseInt（txtNumber.value）-1；
if（newNumber.setTimeout（）.setInterval（）.onmousedown.onmouseup.onmouseout//
//#计时器
//
//如果您不熟悉此代码构造，
//（我认为它被称为“模块”模式IIRC）
//这是它背后的基本结构：
//
//定义/运行/设置\上下文/一次性传递\匿名函数的参数
//为模块定义设置“安全”（专用）范围
//模块分配在顶部执行
//便于发现、重命名和在需要的地方移动
//“工厂”是一个函数，它应该返回“模块”是什么
//无论是函数、对象还是其他什么，
//并将其分配给任意“主机”对象，
//提供重命名空间，以防命名冲突
//
// ;（（功能（名称、工厂）{
//
////此===模块的上下文
//
//此[名称]=工厂（）；
//
//}）打电话(
//
//hostObject，//要将模块附加到的对象
//“customModuleName”，//用于它的任意名称
//function（）{//factory方法，该方法应该定义/返回（最好是独立的）一段功能
//
////保存以执行此范围中所需的任何操作
////不影响全局。
////声明标识符等。
////此函数返回的任何内容都分配给上面的上下文
//
//函数doStuff（）{
//返回Math.random（）>.5；
// }
//
//变量
//_api=
// {
//道具:1,，
//方法：函数（）{
//var-stuff；
//stuff=doStuff（）；
//归还物品；
// }
// };
//
////…代码
//
////并返回模块的目标是什么
//返回api；
//
// }
//
// ));
//
;（（功能（字段，dfn）{
//将“计时器”标识符添加到全局范围
此[field]=dfn（）；
}）。打电话(
窗口，//将对象指定为将函数指定为
“Timer”，//要使用的属性名称
函数（）{
//助手和
//下面代码使用的快捷方式
变量未定义；//==未定义
var aproto=Array.prototype；
var uu={
//用于筛选计时器api参数中的函数
isfn：功能（o）{
返回类型o==“函数”；
},
//是否为对象提供参数
isobj：功能（o）{
返回o==对象（o）；
},
//检查提供的参数，
//对于：null、未定义、NaN返回false
//用于检查参数是否传递给计时器方法
isvalid:函数（o）{
返回（o！=null）&（o==o）；
},
//删除与传递的参数匹配的数组元素
//应该通过.call/.apply函数方法使用：
//_uu.gc.call（arr，“a”、“b”、“c”）等。
//向后迭代数组。如果当前值为1，则将其拼接
//匹配提供的参数之一
//返回gc-ed数组
//.off（）方法用于删除计划函数
gc：函数（）{
//此===（数组）目标\u数组\u到\u清理
//提供了要删除的参数[]
var togc=u3;.slice（参数）；
为了(
var i=该长度；
--i>=0；
（togc.indexOf（this[i]）！=-1）
&&这个。拼接（i，1）
);
归还这个；
},
//清空传递的数组并返回它
//.off（）方法用于删除计划函数
空：函数（arr）{
返回（arr.length=0，arr）；
},
//循环数组
//使用native.forEach（如果可用）
//否则将模拟该行为
//返回迭代数组
//.fire（）方法用于循环已注册函数[]和
//按顺序执行
arreach：（函数（）{
返回（aproto.forEach的类型==“函数”）
？功能（arr、fn）{
arr.forEach（fn）；
返回arr；
}
：功能（arr，fn）{
为了(
var i=0，
l=阵列长度；
i//
// #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 );
//
//
//
//
var mouseDown;
jQuery(document).ready(function($){
$('#number').on('mousedown',function(e){
mouseDown = setInterval(add,150,this,1); // 150 is the number of ms you want
// to delay each number addition
})
.on('mouseup',function(e){
clearInterval(mouseDown);
});
});
function add(n,val){
var currentValue = parseInt($(n).text());
$(n).text(currentValue+val);
}