js监听

this.touchListener = cc.EventListener.create({
3 event: cc.EventListener.TOUCH_ONE_BY_ONE,
4 /*
5 可选event类型列表:
6
7 cc.EventListener.TOUCH_ONE_BY_ONE (单点触摸)
8 cc.EventListener.TOUCH_ALL_AT_ONCE (多点触摸)
9 cc.EventListener.KEYBOARD (键盘)
10 cc.EventListener.MOUSE (鼠标)
11 cc.EventListener.ACCELERATION (加速计)
12 cc.EventListener.CUSTOM (自定义)
13
14 */
15 swallowTouches: true,  // 设置是否吞没事件,在 onTouchBegan 方法返回 true 时吞掉事件,不再向下传递。
16 onTouchBegan:function(touch, event) //实现 onTouchBegan 事件处理回调函数
17 {
18 19 20
21 return self.checkHit(touch.getLocation()); //传递坐标
22 },
23
24 onTouchMoved:function(touch, event) //实现onTouchMoved事件处理回调函数, 触摸移动时触发
25 {
26 self.movePickedHitTile(touch.getLocation());
27 return true;
28 },
29
30 onTouchEnded:function(touch, event)// 实现onTouchEnded事件处理回调函数
31 {
32 self.dropTile(touch.getLocation());
33 return true;
34 }
35 });
可选event类型列表:

7 cc.EventListener.TOUCH_ONE_BY_ONE (单点触摸)
8 cc.EventListener.TOUCH_ALL_AT_ONCE (多点触摸)
9 cc.EventListener.KEYBOARD (键盘)
10 cc.EventListener.MOUSE (鼠标)
11 cc.EventListener.ACCELERATION (加速计)
12 cc.EventListener.CUSTOM (自定义)

cc.eventManager.addListener(this.touchListener, node);  // 添加监听器到管理器
38 /*
39 这里的cc.eventManager 是一个单例对象,可直接拿来使用。
40 通过调用 addListener 函数可以将listener加入到管理器中。
41 需要注意的是第二个参数
42 如果传入的是一个Node对象,则加入的是SceneGraphPriority(精灵以显示优先级) 类型的listener
43 如果是一个数值类型的参数,则加入到的是FixedPriority 类型的listener。

// 获取当前触摸点相对于按钮所在的坐标
target.convertToNodeSpace(touch.getLocation());

if (cc.rectContainsPoint(rect, locationInNode)) { // 判断触摸点是否在按钮范围内

runAction //运行操作
cc.sequence //顺序执行
cc.rotateTo(2, 120), //旋转角度
cc.scaleTo(2,0.5, 0.5)//x轴,y轴的缩放
toFixed(5) //保留小数点后五位
cc.textureCache.addImage(this.basePic_url)//缓存添加图片
cc.director.getWinSize() //获取屏幕尺寸
cc.rect( x, y, width, height ) 该方法用来快速创建一个新的矩形
Math.random() //随机数
this.setOpacity() 设置透明度
initwithfile直接使用rsource下的图片,不放入缓存,加载速度慢另一个方法将

所有图片放入一个缓存中,加载速度快.不过只能有一个.
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
sort() 方法用于对数组的元素进行排序。
this.unschedule()// 取消预订
cc.p通过该简便的函数进行创建 cc.Vec2 对象。
vec2表示 2D 向量和坐标

addChild()与addChildAt()

<think>好的,我现在需要帮用户解决如何用JS监听页面URL变化的问题。首先,我得回忆一下相关的知识,然后结合用户提供的引用内容,整理出一个清晰的回答。 用户给的引用里提到了几种方法,比如hashchange事件和定时器检测,还有微信小程序的onAppRoute方法。不过用户现在的问题是纯JS环境下的监听,可能不涉及小程序,所以重点应该在浏览器端的JS实现。 首先,我需要分情况讨论。URL变化主要有两种:hash变化和路径/search参数变化。对于hash变化,可以用hashchange事件,这是比较直接的。引用2和3都提到了这个方法,所以应该详细说明。 然后是路径或search参数的变化,这种情况通常是通过History API(pushState或replaceState)触发的,但原生的JS没有直接的事件监听。不过用户可能想监听这些变化,这时候可能需要重写history的方法,或者使用popstate事件,不过popstate只在浏览器动作(如前进后退)时触发,手动调用pushState不会触发。这里需要解释清楚,并给出解决方案,比如重写pushState方法或者使用MutationObserver。 接下来,用户可能需要代码示例,所以我要写出具体的实现,比如hashchange的监听,以及如何处理History API的变化。引用3提到了定时器检测,这可以作为备选方案,但可能不够高效,可以提到但建议使用其他方法。 另外,用户可能想了解不同场景下的解决方案,比如全局监听还是局部监听,是否需要兼容旧浏览器。这时候需要分点说明,给出不同情况下的处理方式。 最后,生成相关问题的时候,要考虑用户可能进一步的问题,比如兼容性、微信小程序中的实现、单页应用中的处理等。这样能帮助用户更全面地了解相关主题。 总结步骤: 1. 分情况讨论hash变化和路径/search参数变化。 2. 对每种情况给出监听方法,包括代码示例。 3. 提到兼容性和备选方案。 4. 生成相关问题,覆盖扩展需求和不同场景。</think>### 如何用JS监听页面URL的变化? 在JavaScript中监听URL变化需要根据不同的场景选择技术方案,主要分为以下两种情况: --- #### 一、监听Hash片段变化(#后的部分) 当URL的哈希部分(`#xxx`)发生变化时,可通过`hashchange`事件实现监听。 **实现方法**: ```javascript // 方式1:绑定事件监听器 window.addEventListener('hashchange', function(event) { console.log('新URL:', event.newURL); console.log('旧URL:', event.oldURL); }); // 方式2:直接赋值onhashchange window.onhashchange = function(event) { // 通过location.hash获取当前hash值 console.log('当前hash:', location.hash); }; ``` *适用场景*:单页应用(SPA)路由、锚点跳转[^2][^3]。 --- #### 二、监听完整URL变化(路径或search参数) 当通过`history.pushState()`或`history.replaceState()`修改路径或查询参数时,需结合以下方法监听: **1. 重写History API方法** 拦截`pushState`和`replaceState`调用: ```javascript const originalPushState = history.pushState; history.pushState = function(state, title, url) { originalPushState.apply(history, arguments); // 自定义回调函数 console.log('URL变化为:', url); // 触发自定义事件(可选) window.dispatchEvent(new Event('urlchange')); }; // 监听自定义事件 window.addEventListener('urlchange', function() { console.log('检测到URL变化:', location.href); }); ``` **2. 使用MutationObserver监听`<body>`元素** 适用于动态修改DOM的路由库: ```javascript const observer = new MutationObserver(function(mutations) { console.log('URL可能已变化:', location.href); }); observer.observe(document.body, { childList: true, subtree: true }); ``` **3. 轮询检测(兼容旧浏览器)** 通过定时器检查`location.href`: ```javascript let lastUrl = location.href; setInterval(() => { if (location.href !== lastUrl) { console.log('URL已变化:', location.href); lastUrl = location.href; } }, 100); ``` --- #### 三、特殊场景:微信小程序 微信小程序需使用**全局监听函数**`onAppRoute`: ```javascript // app.js中定义 App({ onAppRoute: function() { console.log('页面路由变化', getCurrentPages()); } }); ``` 此方法可捕获所有页面跳转事件,包括Tab切换[^1]。 --- ### 方案对比 | 方法 | 优点 | 缺点 | |--------------------|-------------------------|-----------------------| | hashchange | 原生支持、简单 | 仅监听hash变化 | | 重写History API | 精确控制 | 需兼容原生方法 | | MutationObserver | 兼容部分框架 | 可能误触发 | | 轮询检测 | 兼容性最好 | 性能消耗较大 | ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值