浏览器常用事件解析

之前写过一篇浏览器事件的相关操作和事件运行的原理——JavaScript浏览器事件解析。这一篇主要写一些常用的事件及一些可能的坑。

表单事件

键盘事件

当 , </code> 的值发生变化时触发。此外，打开 contenteditable 属性的元素，只要值发生变化，也会触发 input 事件。input 事件的一个特点，就是会连续触发，比如用户每次按下一次按键，就会触发一次input事件。</p> <p>此类事件包括: keydown, keyup,</p> <h3>鼠标事件</h3> <p>select 事件当在<code><input></code>, <code><textarea></code>中选中文本时触发</p> <p>change 事件当<code><input></code>, <code><select></code>, <code><textarea></code>的值发生变化时触发。它与 input 事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发，而且input事件必然会引发change事件。具体来说，分成以下几种情况:</p> <ul> <li>激活单选框(radio)或复选框(checkbox)时触发。</li> <li>用户提交时触发。比如，从下列列表(select)完成选择，在日期或文件输入框完成选择。</li> <li>当文本框或textarea元素的值发生改变，并且丧失焦点时触发。</li> <li>reset事件当表单重置(所有表单成员变回默认值)时由form元素触发。</li> <li>submit事件当表单数据向服务器提交时由form元素触发。</li> </ul> <h2>文档事件:</h2> <h3>beforeunload</h3> <p>beforeunload 事件当窗口将要关闭，或者 document 和网页资源将要卸载时触发。它可以用来防止用户不当心关闭网页。该事件的默认动作就是关闭当前窗口或文档。如果在监听函数中，调用了 event.preventDefault()，或者对事件对象的 returnValue 属性赋予一个非空的值，就会自动跳出一个确认框，让用户确认是否关闭网页。如果用户点击“取消”按钮，网页就不会关闭。监听函数所返回的字符串，会显示在确认对话框之中:</p> <pre><code class="js"> window.addEventListener('beforeunload', function(event) { if(event.preventDefault){ event.preventDefault(); } else { event.returnValue = '你确认要离开吗？'; } }); </code></pre> <h3>unload 与 load</h3> <p>unload 事件在窗口关闭或者 document 对象将要卸载时触发，发生在 window, body, frameset 等对象上面。它的触发顺序排在 beforeunload, pagehide 事件后面。unload 事件只在页面没有被浏览器缓存时才会触发，换言之，如果通过按下“前进/后退”导致页面卸载，并不会触发 unload 事件。当 unload 事件发生时，document 对象处于一个特殊状态。所有资源依然存在，但是对用户来说都不可见，UI互动(window.open, alert, confirm方法等)全部无效。这时即使抛出错误，也不能停止文档的卸载。</p> <p>load事件在页面加载成功时触发，error事件在页面加载失败时触发。注意，页面从浏览器缓存加载，并不会触发load事件。</p> <p>这两个事件实际上属于进度事件，不仅发生在 document 对象，还发生在各种外部资源上面。浏览网页就是一个加载各种资源的过程，图像(image), 样式表(style sheet), 脚本(script), 视频(video), 音频(audio), Ajax请求(XMLHttpRequest)等等。这些资源和document对象, window对象, XMLHttpRequestUpload对象，都会触发 load 事件和 error 事件。</p> <h3>pageshow 与 pagehide</h3> <p>pageshow事件，pagehide事件: 默认情况下，浏览器会在当前会话(session)缓存页面，当用户点击“前进/后退”按钮时，浏览器就会从缓存中加载页面。<br> pageshow 事件在页面加载时触发，包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载(不管是不是从浏览器缓存)时都运行的代码，可以放在这个事件的监听函数。第一次加载时，它的触发顺序排在load事件后面。从缓存加载时，load 事件不会触发，因为网页在缓存中的样子通常是 load 事件的监听函数运行后的样子，所以不必重复执行。同理，如果是从缓存中加载页面，网页内初始化的 JavaScript 脚本(比如 DOMContentLoaded 事件的监听函数)也不会执行。pageshow 事件有一个 persisted 属性，返回一个布尔值。页面第一次加载时，这个属性是false；当页面从缓存加载时，这个属性是true。</p> <pre><code class="js">document.onpageshow = function(event){} if(event.persisted){ //如果存缓存加载 } } </code></pre> <p>同样的，将这个属性设为 true，就表示页面要保存在缓存中；设为 false ，表示网页不保存在缓存中，这时如果设置了 unload 事件的监听函数，该函数将在 pagehide 事件后立即运行。如果页面包含 frame ，则 frame 页面的 pageshow 事件和 pagehide 事件，都会在主页面之前触发。</p> <h3>DOMContentLoaded 和 readystatechange</h3> <p>DOMContentLoaded 事件当 HTML 文档下载并解析完成以后，就会在 document 对象上触发 DOMContentLoaded 事件。这时，仅仅完成了 HTML 文档的解析(整张页面的DOM生成)，所有外部资源(样式表, 脚本, iframe等等)可能还没有下载结束。也就是说，这个事件比 load 事件，发生时间早得多。注意，网页的 JavaScript 脚本是同步执行的，所以定义 DOMContentLoaded 事件的监听函数，应该放在所有脚本的最前面。否则脚本一旦发生堵塞，将推迟触发 DOMContentLoaded 事件。此外，IE8 不支持 DOMContentLoaded 事件，可以使用 readystatechange 事件代替。</p> <p>readystatechange 事件发生在 Document 对象和 XMLHttpRequest 对象，当它的 readyState 属性发生变化时触发。</p> <h3>其他文档级事件</h3> <p>上面重点提到了 DOMContentLoaded, readystatechange, pageshow, pagehide, unload, load 和 beforeunload 事件，此外还有一下事件:</p> <ul> <li>onafterprint: 文档打印之后运行的脚本</li> <li>onbeforeprint: 文档打印之前运行的脚本</li> <li>onbeforeunload: 文档卸载之前运行的脚本(上文已涉及)</li> <li>onerror: 在错误发生时运行的脚本</li> <li>onhaschange: 当文档已改变时运行的脚本</li> <li>onload: 页面结束加载之后触发(上文已涉及)</li> <li>onmessage: 在消息被触发时运行的脚本</li> <li>onoffline: 当文档离线时运行的脚本</li> <li>ononline: 当文档上线时运行的脚本</li> <li>onpagehide: 当窗口隐藏时运行的脚本(上文已涉及)</li> <li>onpageshow: 当窗口成为可见时运行的脚本(上文已涉及)</li> <li>onpopstate: 当窗口历史记录改变时运行的脚本</li> <li>onredo: 当文档执行撤销（redo）时运行的脚本</li> <li>onresize: 当浏览器窗口被调整大小时触发</li> <li>onstorage: 在 Web Storage 区域更新后运行的脚本</li> <li>onundo: 在文档执行 undo 时运行的脚本</li> <li>onscroll: 事件在文档或文档元素滚动时执行脚本</li> </ul> <h2>鼠标事件 与 MouseEvent对象</h2> <pre><code class="js">new MouseEvent(typeArg, mouseEventInit); </code></pre> <p>内置的鼠标事件包括:</p> <ol> <li>mousedown: 按下鼠标</li> <li>mouseup: 鼠标抬起</li> <li>click: 点击</li> <li>dblclick: 双击</li> <li>mousemove: 鼠标移动</li> <li>mouseover: 鼠标移入，冒泡</li> <li>mouseout: 鼠标移出，冒泡</li> <li>mouseenter: 鼠标移入，不冒泡</li> <li>mouseleave: 鼠标移出，不冒泡</li> <li>contextmenu: 右键菜单</li> <li>wheel: 滚轮事件</li> </ol> <p>其具有如下常用属性:</p> <ul> <li>altKey，ctrlKey，metaKey，shiftKey属性返回一个布尔值，表示鼠标事件发生时，是否按下某个键；</li> <li>button 返回事件的鼠标键信息, 值为0(左键), 1或4(中键, 4为IE中的值)，2(右键)，可通过switch来选择执行分之)；</li> <li>buttons 属性返回一个3个比特位的值，表示同时按下了哪些键</li> <li>clientX，clientY 返回鼠标位置相对于浏览器窗口左上角的坐标，单位为像素</li> <li>screenX，screenY 返回鼠标位置相对于屏幕左上角的坐标，单位为像素</li> <li>movementX，movementY 返回一个位移，单位为像素，表示当前位置与上一个 mousemove 事件之间的距离，在数值上:</li> </ul> <blockquote> <p>currentEvent.movementX = currentEvent.screenX - previousEvent.screenX<br> currentEvent.movementY = currentEvent.screenY - previousEvent.screenY</p> </blockquote> <ul> <li>relatedTarget属性返回事件的次要相关节点，即和target属性对应的节点，如: mouseout target 指将要离开的节点，relatedTarget 指将要进入的节点。对于那些没有次要相关节点的事件，该属性返回null</li> <li>wheel 事件是与鼠标滚轮相关的事件，浏览器提供一个 WheelEvent 构造函数 new WheelEvent(typeArg, mouseEventInit)</li> <li>deltaX: 返回一个数值，表示滚轮的水平滚动量</li> <li>deltaY: 返回一个数值，表示滚轮的垂直滚动量</li> <li>deltaZ: 返回一个数值，表示滚轮的Z轴滚动量</li> <li>deltaMode: 返回一个数值，表示滚动的单位，适用于上面三个属性。0表示像素，1表示行，2表示页</li> </ul> <h2>键盘事件 KeyboardEvent 对象</h2> <pre><code class="js">构造函数 new KeyboardEvent(typeArg, KeyboardEventInit) </code></pre> <p>键盘事件包括keydown(按下键盘时触发该事件)，keypress(只要按下的键并非Ctrl, Alt, Shift和Meta，就接着触发keypress事件), keyup(松开键盘时触发该事件)</p> <ul> <li>altKey，ctrlKey，metaKey，shiftKey: 返回一个布尔值，表示是否按下对应的键</li> <li>key: 返回一个字符串，表示按下的键名。如果同时按下一个控制键和一个符号键，则返回符号键的键名</li> <li>keyCode: 返回按键的 ASCII 码，注意: 这里是不区分大小写的，<code>A键</code>不论输出 A 还是 a keyCode 都是68。在 IE 中使用 witch 属性</li> </ul> <h2>进度事件 ProgressEvent对象</h2> <pre><code class="js">new ProgressEvent(type, { lengthComputable: aBooleanValue, // false as default loaded: aNumber, // 0 as default total: aNumber // 0 as default }); </code></pre> <p>进度事件用来描述一个事件进展的过程，比如XMLHttpRequest对象发出的HTTP请求的过程, <code><img></code>, <code><audio></code>, <code><video></code>, <code><style></code>, <code><link></code>加载外部资源的过程，包括下载和上传。通常包括以下事件:</p> <ol> <li>abort事件: 当进度事件被中止时触发。如果发生错误，导致进程中止，不会触发该事件。</li> <li>error事件: 由于错误导致资源无法加载时触发，不会冒泡。error 事件的监听函数最好放在如 img 元素的 HTML 属性中。</li> <li>load事件: 进度成功结束时触发。</li> <li>loadstart事件: 进度开始时触发。</li> <li>loadend事件: 进度停止时触发，发生顺序排在error事件\abort事件\load事件后面。loadend事件的监听函数可以用来取代abort事件/load事件/error事件的监听函数，loadend事件本身不提供关于进度结束的原因，但可以用它来做所有进度结束场景都需要做的一些操作。</li> <li>progress事件: 当操作处于进度之中，由传输的数据块不断触发。</li> <li>timeout事件: 进度超过限时触发</li> </ol> <p>这类事件具有以下属性:</p> <ul> <li>lengthComputable: 返回一个布尔值，表示当前进度是否具有可计算的长度。如果为false，就表示当前进度无法测量。</li> <li>total: 返回一个数值，表示当前进度的总长度。如果是通过 HTTP 下载某个资源，表示内容本身的长度，不含 HTTP 头部的长度。如果 lengthComputable 属性为 false，则 total 属性就无法取得正确的值。</li> <li>loaded: 返回一个数值，表示当前进度已经完成的数量。该属性除以total属性，就可以得到目前进度的百分比。</li> </ul> <pre><code class="js">//进度计算 if (e.lengthComputable){ var percentComplete = e.loaded / e.total; } </code></pre> <h2>拖拽事件 DragEvent 对象</h2> <pre><code class="js">new DragEvent(type, DragEventInit); </code></pre> <p>拖拽指的是，用户在某个对象上按下鼠标键不放，拖动它到另一个位置，然后释放鼠标键，将该对象放在那里。拖拽的对象有好几种，包括 Element 节点, 图片, 链接, 选中的文字等等。在 HTML 网页中，除了 Element 节点默认不可以拖拽，其他(图片, 链接, 选中的文字)都是可以直接拖拽的。为了让 Element 节点可拖拽，可以将该节点的 draggable 属性设为 true。draggable 属性可用于任何 Element 节点，但是图片(img 元素)和链接(a 元素)不加这个属性，就可以拖拽。对于它们，用到这个属性的时候，往往是将其设为 false，防止拖拽。注意，一旦某个 Element 节点的 draggable 属性设为 true，就无法再用鼠标选中该节点内部的文字或子节点了。</p> <p>当Element节点或选中的文本被拖拽时，就会持续触发拖拽事件，包括以下一些事件:</p> <ol> <li>drag事件: 拖拽过程中，在被拖拽的节点上持续触发。</li> <li>dragstart事件: 拖拽开始时在被拖拽的节点上触发，该事件的target属性是被拖拽的节点。通常应该在这个事件的监听函数中，指定拖拽的数据。</li> <li>dragend事件: 拖拽结束时(释放鼠标键或按下escape键)在被拖拽的节点上触发，该事件的target属性是被拖拽的节点。它与dragStart事件，在同一个节点上触发。不管拖拽是否跨窗口，或者中途被取消，dragend事件总是会触发的。</li> <li>dragenter事件: 拖拽进入当前节点时，在当前节点上触发，该事件的target属性是当前节点。通常应该在这个事件的监听函数中，指定是否允许在当前节点放下(drop)拖拽的数据。如果当前节点没有该事件的监听函数，或者监听函数不执行任何操作，就意味着不允许在当前节点放下数据。在视觉上显示拖拽进入当前节点，也是在这个事件的监听函数中设置。</li> <li>dragover事件: 拖拽到当前节点上方时，在当前节点上持续触发，该事件的target属性是当前节点。该事件与dragenter事件基本类似，默认会重置当前的拖拽事件的效果(DataTransfer对象的dropEffect属性)为none，即不允许放下被拖拽的节点，所以如果允许在当前节点drop数据，通常会使用preventDefault方法，取消重置拖拽效果为none。</li> <li>dragleave事件: 拖拽离开当前节点范围时，在当前节点上触发，该事件的target属性是当前节点。在视觉上显示拖拽离开当前节点，就在这个事件的监听函数中设置。</li> <li>drop事件: 被拖拽的节点或选中的文本，释放到目标节点时，在目标节点上触发。注意，如果当前节点不允许drop，即使在该节点上方松开鼠标键，也不会触发该事件。如果用户按下Escape键，取消这个操作，也不会触发该事件。该事件的监听函数负责取出拖拽数据，并进行相关处理。</li> </ol> <p>关于拖拽事件，有以下几点注意事项:</p> <ol> <li>拖拽过程只触发以上这些拖拽事件，尽管鼠标在移动，但是鼠标事件不会触发。</li> <li>将文件从操作系统拖拽进浏览器，不会触发 dragStart 和 dragend 事件。</li> <li>dragenter 和 dragover 事件的监听函数，用来指定可以放下(drop)拖拽的数据。由于网页的大部分区域不适合作为 drop 的目标节点，所以这两个事件的默认设置为当前节点不允许 drop。如果想要在目标节点上 drop 拖拽的数据，首先必须阻止这两个事件的默认行为，或者取消这两个事件。</li> </ol> <pre><code class="js"><div ondragover="return false"> //或 <div ondragover="event.preventDefault()"> </code></pre> <ol start="4"> <li>拖拽事件用一个 DragEvent 对象表示，该对象继承 MouseEvent 对象，DragEvent 对象只有一个独有的属性 dataTransfer，其他都是继承的属性。dataTransfer 属性用来读写拖拽事件中传输的数据，所有的拖拽事件都有一个 dataTransfer 属性，用来保存需要传递的数据，这个属性的值是一个 DataTransfer 对象。拖拽的数据保存两方面的数据: 数据的种类(又称格式)和数据的值。数据的种类是一个MIME字符串，比如 text/plain 或者 image/jpg，数据的值是一个字符串;</li> </ol> <p>dataTransfer 对象的属性的值是一个对象，其中包括以下属性:</p> <ul> <li>dropEffect 属性: 设置放下(drop)被拖拽节点时的效果，可能的值包括 copy(复制被拖拽的节点), move(移动被拖拽的节点), link(创建指向被拖拽的节点的链接), none(无法放下被拖拽的节点)。设置除此以外的值，都是无效的。</li> <li>effectAllowed 属性: 设置本次拖拽中允许的效果，可能的值包括 copy, move, link, copyLink, copyMove, linkMove, all, none, uninitialized(默认值，等同于 all)。如果某种效果是不允许的，用户就无法在目标节点中达成这种效果。</li> <li>files 属性: 是一个 FileList 对象，包含一组本地文件，可以用来在拖拽操作中传送。如果本次拖拽不涉及文件，则属性为空的 FileList 对象。通过files属性读取拖拽文件的信息。如果想要读取文件内容，就要使用 FileReader 对象。</li> <li>types 属性: 是一个数组，保存每一次拖拽的数据格式，如'text/uri-list'</li> <li>setData() 方法: 用来设置事件所带有的指定类型的数据。它接受两个参数，第一个是数据类型，第二个是具体数据。如果指定的类型在现有数据中不存在，则该类型将写入types属性；如果已经存在，在该类型的现有数据将被替换。</li> </ul> <pre><code class="js">event.dataTransfer.setData("text/plain", "Text to drag"); </code></pre> <ul> <li>getData() 方法接受一个字符串(表示数据类型)作为参数，返回事件所带的指定类型的数据(通常是用 setData 方法添加的数据)。如果指定类型的数据不存在，则返回空字符串。</li> </ul> <pre><code class="js">event.dataTransfer.getData(types[0]); </code></pre> <ul> <li>clearData() 方法接受一个字符串(表示数据类型)作为参数，删除事件所带的指定类型的数据。如果没有指定类型，则删除所有数据。如果指定类型不存在，则原数据不受影响。</li> </ul> <pre><code class="js">event.dataTransfer.clearData("text/uri-list"); </code></pre> <ul> <li>setDragImage() 可以用来自定义这张图片，它接受三个参数，第一个是img图片元素或者canvas元素，如果省略或为null则使用被拖动的节点的外观，第二个和第三个参数为鼠标相对于该图片左上角的横坐标和右坐标。</li> </ul> <pre><code class="js">event.dataTransfer.setDragImage(img, 0, 0); </code></pre> <h2>触摸事件</h2> <pre><code class="js"> new Touch(touchInit); </code></pre> <p>触摸事件包括以下5种:</p> <ol> <li>touchstart: 用户接触触摸屏时触发，它的 target 属性返回发生触摸的 Element 节点(IE10+中使用 mspointerdown 事件);</li> <li>touchend: 用户不再接触触摸屏时(或者移出屏幕边缘时)触发，它的 target 属性与 touchstart 事件的 target 属性是一致的，它的 changedTouches 属性返回一个TouchList对象，包含所有不再触摸的触摸点(Touch对象)(IE10+中使用 mspointerup 事件);</li> <li>touchmove: 用户移动触摸点时触发，它的 target 属性与 touchstart 事件的 target 属性一致。如果触摸的半径, 角度, 力度发生变化，也会触发该事件。(IE10+中使用 mspointermove 事件);</li> <li>touchenter: 当触点进入某个 element 时触发。此事件没有冒泡过程。(IE10+中使用 mspointerover 事件);</li> <li>touchleave: 当触点离开某个 element 时触发。此事件没有冒泡过程。(IE10+中使用 mspointerout 事件);</li> <li>touchcancel: 当触点由于某些原因被中断时触发。有几种可能的原因如下(具体的原因根据不同的设备和浏览器有所不同):(IE10+中没有对应事件);</li> </ol> <ul> <li> <ol> <li>由于某个事件取消了触摸: 例如触摸过程被一个模态的弹出框或电话打断;</li> </ol></li> <li> <ol start="2"> <li>触点离开了文档窗口，而进入了浏览器的界面元素, 插件或者其他外部内容区域;</li> </ol></li> <li> <ol start="3"> <li>当用户产生的触点个数超过了设备支持的个数，从而导致 TouchList 中最早的 Touch 对象被取消。</li> </ol></li> </ul> <p>触摸 API 由三个对象组成。每个 Touch 对象代表一个触点; 每个触点都由其位置，大小，形状，压力大小，和目标 element 描述。 TouchList 对象代表多个触点的一个列表。具体包括以下属性:</p> <ul> <li>identifier 属性: 表示touch实例的独一无二的识别符。它在整个触摸过程中保持不变(IE10+中使用 pointerId 属性);</li> <li>screenX/screenY 属性: 分别表示触摸点相对于屏幕左上角的横坐标和纵坐标，与页面是否滚动无关;</li> <li>clientX/clientY 属性: 分别表示触摸点相对于浏览器视口左上角的横坐标和纵坐标，与页面是否滚动无关;</li> <li>pageX/pageY 属性: 分别表示触摸点相对于当前页面左上角的横坐标和纵坐标，包含了页面滚动带来的位移;</li> <li>radiusX/radiusY 属性: 分别返回触摸点周围受到影响的椭圆范围的X轴和Y轴，单位为像素;</li> <li>rotationAngle 属性: 表示触摸区域的椭圆的旋转角度，单位为度数，在0到90度之间。指尖接触屏幕，触摸范围会形成一个椭圆，这三个属性就用来描述这个椭圆区域(IE10+中使用 rotation 属性);</li> <li>force 属性: 返回一个0到1之间的数值，表示触摸压力。0代表没有压力，1代表硬件所能识别的最大压力(IE10+中使用 pressure 属性,取值0 - 255);</li> <li>target 属性: 返回一个Element节点，代表触摸发生的那个节点。当这个触点最开始被跟踪时(在 touchstart 事件中), 触点位于的HTML元素.哪怕在触点移动过程中, 触点的位置已经离开了这个元素的有效交互区域, 或者这个元素已经被从文档中移除. 需要注意的是, 如果这个元素在触摸过程中被移除, 这个事件仍然会指向它, 但是不会再冒泡这个事件到 window 或 document 对象. 因此, 如果有元素在触摸过程中可能被移除, 最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件. 只读属性.</li> <li>altKey/ctrlKey/metaKey/shiftKey 都为只读属性: 返回一个布尔值，表示触摸的同时，是否按下某个键</li> <li>changedTouches 属性: 返回一个 TouchList 对象，包含了由当前触摸事件引发的所有Touch对象(即相关的触摸点)。它包含了代表所有从上一次触摸事件到此次事件过程中，状态发生了改变的触点的 Touch 对象。只读属性。</li> <li>targetTouches属性: 返回一个 TouchList 对象，包含了触摸的目标 Element 节点内部，所有仍然处于活动状态的触摸点。</li> <li>touches 属性返回一个 TouchList 对象(类数组的对象)，包含了所有当前接触触摸平面的触点的 Touch 对象，无论它们的起始于哪个 element 上，也无论它们状态是否发生了变化。只读属性</li> <li>type 属性: 指此次触摸事件的类型。</li> <li>target属性: 此次触摸事件的目标 element 。这个目标元素对应 TouchEvent.changedTouches 中的触点的起始元素(在之后的事件类型中有说明)，但是请注意: 此次事件中其他的触点的起始元素可能有所不同。以防万一，应使用和每一个单独触点相关联的目标 。</li> </ul> <p>以下是 IE10+ 中的其他属性：</p> <ul> <li>hwTimestamp: 创建事件时间(毫秒);</li> <li>isPrimary: 表示该时间是否是主事件;</li> <li>pointerType: 取值自 event.MSPOINTER_TYPE_TOUCH, event.MAPOINTER_TYPE_PEN, event.MSPOINTER_TYPE_MOUSE, 表示触摸设备;</li> <li>tilt[X|Y]: 笔的倾斜程度;</li> </ul> <p>举一个简单例子：</p> <pre><code class="js">function handleMove(evt) { evt.preventDefault(); // 阻止浏览器继续处理触摸事件，也阻止发出鼠标事件 var touches = evt.changedTouches; for (var i = 0; i < touches.length; i++) { var id = touches[i].identifier; var touch = touches.identifiedTouch(id); console.log(touch.pageX, touch.pageY); } } </code></pre> <p>对于跨平台交互，我封装了一个 tap相关事件如下：</p> <pre><code class="js">//以下代码并未兼容低版本 IE function addTapListener(node, callback){ var startEvent = window.onmousedown ? window.onmspointerdown ? 'mspointerdow' : 'mousedown' : 'touchstart'; var event = window.onclick ? 'click' : 'touch'; var endEvent = window.onmouseup ? 'mouseup' : 'touchend'; node.addEventListener(startEvent, function(e){ var tap = document.createEvent('CustomEvent'); tap.initCustomEvent('tapstart', true, true, null); node.dispatchEvent(tap); }); node.addEventListener(event, function(e){ var tap = document.createEvent('CustomEvent'); tap.initCustomEvent('tap', true, true, null); node.dispatchEvent(tap); }); node.addEventListener(endEvent, function(e){ var tap = document.createEvent('CustomEvent'); tap.initCustomEvent('tapend', true, true, null); node.dispatchEvent(tap); }); node.addEventListener('tap', callback); } </code></pre> <p>当然本文仅仅列举了一些常用事件，其实事件还有很多，本文会在必要的时候继续更新，但即便如此也不可能穷尽所有的事件，比如还有动画事件: animationstart, animation, animationend 等等。</p> </article> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1212087373110808576"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(浏览器常用事件解析)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835513551142350848.htm" title="OC语言多界面传值五大方式" target="_blank">OC语言多界面传值五大方式</a> <span class="text-muted">Magnetic_h</span> <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/objective-c/1.htm">objective-c</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt</div> </li> <li><a href="/article/1835511912843014144.htm" title="理解Gunicorn：Python WSGI服务器的基石" target="_blank">理解Gunicorn：Python WSGI服务器的基石</a> <span class="text-muted">范范0825</span> <a class="tag" taget="_blank" href="/search/ipython/1.htm">ipython</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico</div> </li> <li><a href="/article/1835511542284644352.htm" title="学点心理知识，呵护孩子健康" target="_blank">学点心理知识，呵护孩子健康</a> <span class="text-muted">静候花开_7090</span> <div>昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果</div> </li> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835509391361667072.htm" title="Linux下QT开发的动态库界面弹出操作（SDL2）" target="_blank">Linux下QT开发的动态库界面弹出操作（SDL2）</a> <span class="text-muted">13jjyao</span> <a class="tag" taget="_blank" href="/search/QT%E7%B1%BB/1.htm">QT类</a><a class="tag" taget="_blank" href="/search/qt/1.htm">qt</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/sdl2/1.htm">sdl2</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口</div> </li> <li><a href="/article/1835508131032035328.htm" title="ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值）" target="_blank">ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值）</a> <span class="text-muted">研学随笔</span> <a class="tag" taget="_blank" href="/search/arcgis/1.htm">arcgis</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==</div> </li> <li><a href="/article/1835507358353158144.htm" title="《大清方方案》| 第二话" target="_blank">《大清方方案》| 第二话</a> <span class="text-muted">谁佐清欢</span> <div>和珅究竟说了些什么？竟能令堂堂九五之尊龙颜失色！此处暂且按下不表；单说这位乾隆皇帝，果真不愧是康熙从小带过的，一旦决定了要做的事，便杀伐决断毫不含糊。他当即亲自拟旨，着令和珅为钦差大臣，全权负责处理方方事件，并钦赐尚方宝剑，遇急则三品以下官员可先斩后奏。和珅身负皇上重托，岂敢有半点怠慢，当夜即率领相关人等，马不停蹄杀奔江汉。这一路上，和珅的几位幕僚一直在商讨方方事件的处置方案。有位年轻幕僚建议快刀</div> </li> <li><a href="/article/1835506869838376960.htm" title="Python数据分析与可视化实战指南" target="_blank">Python数据分析与可视化实战指南</a> <span class="text-muted">William数据分析</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE/1.htm">数据</a> <div>在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学</div> </li> <li><a href="/article/1835505858444881920.htm" title="git常用命令笔记" target="_blank">git常用命令笔记</a> <span class="text-muted">咩酱-小羊</span> <a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>###用习惯了idea总是不记得git的一些常见命令，需要用到的时候总是担心旁边站了人~~~记个笔记@_@，告诉自己看笔记不丢人初始化初始化一个新的Git仓库gitinit配置配置用户信息gitconfig--globaluser.name"YourName"gitconfig--globaluser.email"youremail@example.com"基本操作克隆远程仓库gitclone查看</div> </li> <li><a href="/article/1835504217729626112.htm" title="Python教程：一文了解使用Python处理XPath" target="_blank">Python教程：一文了解使用Python处理XPath</a> <span class="text-muted">旦莫</span> <a class="tag" taget="_blank" href="/search/Python%E8%BF%9B%E9%98%B6/1.htm">Python进阶</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>目录1.环境准备1.1安装lxml1.2验证安装2.XPath基础2.1什么是XPath？2.2XPath语法2.3示例XML文档3.使用lxml解析XML3.1解析XML文档3.2查看解析结果4.XPath查询4.1基本路径查询4.2使用属性查询4.3查询多个节点5.XPath的高级用法5.1使用逻辑运算符5.2使用函数6.实战案例6.1从网页抓取数据6.1.1安装Requests库6.1.2代</div> </li> <li><a href="/article/1835502578511736832.htm" title="下载github patch到本地" target="_blank">下载github patch到本地</a> <span class="text-muted">小米人er</span> <a class="tag" taget="_blank" href="/search/%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/1.htm">我的博客</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/patch/1.htm">patch</a> <div>以下是几种从GitHub上下载以.patch结尾的补丁文件的方法：通过浏览器直接下载打开包含该.patch文件的GitHub仓库。在仓库的文件列表中找到对应的.patch文件。点击该文件，浏览器会显示文件的内容，在页面的右上角通常会有一个“Raw”按钮，点击它可以获取原始文件内容。然后在浏览器中使用快捷键（如Ctrl+S或者Command+S）将原始文件保存到本地，选择保存的文件名并确保后缀为.p</div> </li> <li><a href="/article/1835502282603589632.htm" title="509. 斐波那契数(每日一题)" target="_blank">509. 斐波那契数(每日一题)</a> <span class="text-muted">lzyprime</span> <div>lzyprime博客(github)创建时间：2021.01.04qq及邮箱：2383518170leetcode笔记题目描述斐波那契数，通常用F(n)表示，形成的序列称为斐波那契数列。该数列由0和1开始，后面的每一项数字都是前面两项数字的和。也就是：F(0)=0，F(1)=1F(n)=F(n-1)+F(n-2)，其中n>1给你n，请计算F(n)。示例1：输入：2输出：1解释：F(2)=F(1)+</div> </li> <li><a href="/article/1835499052125483008.htm" title="Git常用命令－修改远程仓库地址" target="_blank">Git常用命令－修改远程仓库地址</a> <span class="text-muted">猿大师</span> <a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>查看远程仓库地址gitremote-v返回结果originhttps://git.coding.net/＊＊＊＊＊.git(fetch)originhttps://git.coding.net/＊＊＊＊＊.git(push)修改远程仓库地址gitremoteset-urloriginhttps://git.coding.net/＊＊＊＊＊.git先删除后增加远程仓库地址gitremotermori</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835497792265613312.htm" title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a> <span class="text-muted">加密社</span> <a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a> <div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div> </li> <li><a href="/article/1835495770502033408.htm" title="Day17笔记-高阶函数" target="_blank">Day17笔记-高阶函数</a> <span class="text-muted">~在杰难逃~</span> <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/pycharm/1.htm">pycharm</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a> <div>高阶函数【重点掌握】函数的本质：函数是一个变量，函数名是一个变量名，一个函数可以作为另一个函数的参数或返回值使用如果A函数作为B函数的参数，B函数调用完成之后，会得到一个结果，则B函数被称为高阶函数常用的高阶函数：map(),reduce(),filter(),sorted()1.map()map(func,iterable)，返回值是一个iterator【容器，迭代器】func:函数iterab</div> </li> <li><a href="/article/1835495517774245888.htm" title="python八股文面试题分享及解析(1)" target="_blank">python八股文面试题分享及解析(1)</a> <span class="text-muted">Shawn________</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>#1.'''a=1b=2不用中间变量交换a和b'''#1.a=1b=2a,b=b,aprint(a)print(b)结果：21#2.ll=[]foriinrange(3):ll.append({'num':i})print(11)结果:#[{'num':0},{'num':1},{'num':2}]#3.kk=[]a={'num':0}foriinrange(3):#0,12#可变类型，不仅仅改变</div> </li> <li><a href="/article/1835494258262503424.htm" title="【JS】执行时长(100分) |思路参考+代码解析（C++）" target="_blank">【JS】执行时长(100分) |思路参考+代码解析（C++）</a> <span class="text-muted">l939035548</span> <a class="tag" taget="_blank" href="/search/JS/1.htm">JS</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a> <div>题目为了充分发挥GPU算力，需要尽可能多的将任务交给GPU执行，现在有一个任务数组，数组元素表示在这1秒内新增的任务个数且每秒都有新增任务。假设GPU最多一次执行n个任务，一次执行耗时1秒，在保证GPU不空闲情况下，最少需要多长时间执行完成。题目输入第一个参数为GPU一次最多执行的任务个数，取值范围[1,10000]第二个参数为任务数组长度，取值范围[1,10000]第三个参数为任务数组，数字范围</div> </li> <li><a href="/article/1835491353451130880.htm" title="【华为OD技术面试真题 - 技术面】- python八股文真题题库（4)" target="_blank">【华为OD技术面试真题 - 技术面】- python八股文真题题库（4)</a> <span class="text-muted">算法大师</span> <a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选**1.Python中的`with`**用途和功能自动资源管理示例：文件操作上下文管理协议示例代码工作流程解析优点2.\_\_new\_\_和**\_\_init\_\_**区别__new____init__区别总结3.**切片（Slicing）操作**基本切片语法</div> </li> <li><a href="/article/1835490218845761536.htm" title="Python爬虫解析工具之xpath使用详解" target="_blank">Python爬虫解析工具之xpath使用详解</a> <span class="text-muted">eqa11</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>文章目录Python爬虫解析工具之xpath使用详解一、引言二、环境准备1、插件安装2、依赖库安装三、xpath语法详解1、路径表达式2、通配符3、谓语4、常用函数四、xpath在Python代码中的使用1、文档树的创建2、使用xpath表达式3、获取元素内容和属性五、总结Python爬虫解析工具之xpath使用详解一、引言在Python爬虫开发中，数据提取是一个至关重要的环节。xpath作为一门</div> </li> <li><a href="/article/1835486010964799488.htm" title="一个历史事件和查理一世走上断头台有很大关系，这个事件是什么？" target="_blank">一个历史事件和查理一世走上断头台有很大关系，这个事件是什么？</a> <span class="text-muted">王老师聊围棋</span> <div>今天我要讲的历史事件，查理一世被处死的始末。其实查理一世给被处死的时候，与一个事件有很大的联系。这个事件是“普莱德清洗”。提到这个事件，我们不得不提到一个人，这个人就是克伦威尔。可以说，查理一世能够走上断头台，克伦威尔有很大的功劳。为什么这么说呢。那我们就成英国内战的终结说起吧。我们都知道英国的内战是有保王党挑起来。在保王党军队一路凯歌进攻的同时。就在1645年6月14日，在纳西比荒原上进行最后的</div> </li> <li><a href="/article/1835484672059076608.htm" title="mac电脑命令行获取电量" target="_blank">mac电脑命令行获取电量</a> <span class="text-muted">小米人er</span> <a class="tag" taget="_blank" href="/search/%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/1.htm">我的博客</a><a class="tag" taget="_blank" href="/search/macos/1.htm">macos</a><a class="tag" taget="_blank" href="/search/%E5%91%BD%E4%BB%A4%E8%A1%8C/1.htm">命令行</a> <div>在macOS上，有几个命令行工具可以用来获取电量信息，最常用的是pmset命令。你可以通过以下方式来查看电池状态和电量信息：查看电池状态：pmset-gbatt这个命令会返回类似下面的输出：Nowdrawingfrom'BatteryPower'-InternalBattery-0(id=1234567)95%;discharging;4:02remainingpresent:true输出中包括电</div> </li> <li><a href="/article/1835484420023349248.htm" title="18、架构-可观测性之聚合度量" target="_blank">18、架构-可观测性之聚合度量</a> <span class="text-muted">大树~~</span> <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>聚合度量聚合度量是指对系统运行时产生的各种指标数据进行收集、聚合和分析，以了解系统的健康状况和性能表现。聚合度量是可观测性的关键组成部分，通过对度量数据的分析，可以及时发现系统中的异常和瓶颈。以下是对聚合度量各个方面的详细解析，并结合具体的数据案例和技术支撑。指标收集收集系统运行时产生的各种指标数据是聚合度量的基础。常见的指标包括CPU使用率、内存使用率、请求处理时间、请求数、错误率等。以下是指标</div> </li> <li><a href="/article/1835481396408315904.htm" title="如何选择最适合你的项目研发管理软件？TAPD卓越版全面解析" target="_blank">如何选择最适合你的项目研发管理软件？TAPD卓越版全面解析</a> <span class="text-muted">北京云巴巴信息技术有限公司</span> <a class="tag" taget="_blank" href="/search/%E4%BA%A7%E5%93%81%E7%BB%8F%E7%90%86/1.htm">产品经理</a><a class="tag" taget="_blank" href="/search/%E9%9C%80%E6%B1%82%E5%88%86%E6%9E%90/1.htm">需求分析</a> <div>在当今快速发展的科技时代，项目研发管理软件已成为企业不可或缺的重要工具。面对市场上琳琅满目的产品，如何选择一款适合自己团队的项目研发管理软件呢？本文将围绕项目研发管理软件的选择标准，重点介绍TAPD卓越版的特点、优势以及使用体验，让你更好地理解和选择适合自己的项目研发管理软件。项目研发管理软件的选择标准在选择项目研发管理软件时，我们需要考虑以下几个方面的因素：功能全面性：软件是否覆盖了从需求管理、</div> </li> <li><a href="/article/1835480289204334592.htm" title="剧本杀《鲸鱼马戏团》剧本杀剧透+真相答案复盘解析攻略" target="_blank">剧本杀《鲸鱼马戏团》剧本杀剧透+真相答案复盘解析攻略</a> <span class="text-muted">VX搜_奶茶剧本杀</span> <div>本文为剧本杀《鲸鱼马戏团》剧本杀测评+部分真相复盘，获取完整真相复盘只需两步：①、关注微信公众号【奶茶剧本杀】→②、回复剧本杀《鲸鱼马戏团》即可获取查看剧本杀《鲸鱼马戏团》剧本杀真相答案复盘+凶手剧透：以下是玩家评测+部分关键证据，凶手，时间线，复盘解析，推理逻辑--------------------------------------------------------------------</div> </li> <li><a href="/article/1835479137217769472.htm" title="4招写出高价值文章" target="_blank">4招写出高价值文章</a> <span class="text-muted">zhiliner</span> <div>文章写得泛泛是因为思考得不够深，思考得越深文章会越有价值。拿到一个主题一定要去深入挖掘事件背后的东西，比如人物困境以及趋势性的东西。写作过程中有几个深度思考的方法一、解剖，让旧素材焕发新意作为一个写作者，我们能够做的最大贡献，就是给出自己看世界的角度。解剖其实就是把这个话题相关的信息都列出来，详细的列出来，看清楚它的内部。我们看到一个老话题或者一段旧素材的时候，不要只看这个素材或者话题本身，一定要</div> </li> <li><a href="/article/1835476983614631936.htm" title="Python开发常用的三方模块如下：" target="_blank">Python开发常用的三方模块如下：</a> <span class="text-muted">换个网名有点难</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Python是一门功能强大的编程语言，拥有丰富的第三方库，这些库为开发者提供了极大的便利。以下是100个常用的Python库，涵盖了多个领域：1、NumPy，用于科学计算的基础库。2、Pandas，提供数据结构和数据分析工具。3、Matplotlib，一个绘图库。4、Scikit-learn，机器学习库。5、SciPy，用于数学、科学和工程的库。6、TensorFlow，由Google开发的开源机</div> </li> <li><a href="/article/1835476476514889728.htm" title="Shell、Bash、Zsh这都是啥啊" target="_blank">Shell、Bash、Zsh这都是啥啊</a> <span class="text-muted">小白码上飞</span> <a class="tag" taget="_blank" href="/search/bash/1.htm">bash</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Zsh和Bash都是我们常用的Shell，那先搞明白啥是shell吧。Shell作为一个单词，他是“壳”的意思，蛋壳坚果壳。之所以叫壳，是为了和计算机的“核”来区分，用它表示“为使用者提供的操作界面”。所以这个命名其实很形象，翻译成中文，直译过来叫“壳层”。个人认为这个叫法很奇怪，意译貌似也没有什么好的词汇来匹配。就还是叫shell吧。维基百科给的定义是：Incomputing,ashellisa</div> </li> <li><a href="/article/1835471185589137408.htm" title="一文掌握python常用的list（列表）操作" target="_blank">一文掌握python常用的list（列表）操作</a> <span class="text-muted">程序员neil</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>目录一、创建列表1.直接创建列表：2.使用list()构造器3.使用列表推导式4.创建空列表二、访问列表元素1.列表支持通过索引访问元素，索引从0开始：2.还可以使用切片操作访问列表的一部分：三、修改列表元素四、添加元素1.append()：在末尾添加元素2.insert()：在指定位置插入元素五、删除元素1.del：删除指定位置的元素2.remove()：删除指定值的第一个匹配项3.pop()：</div> </li> <li><a href="/article/1835469991932162048.htm" title="发现荞麦过敏这件事" target="_blank">发现荞麦过敏这件事</a> <span class="text-muted">怪小泊</span> <div>荞麦在我这里不是常用的谷物。所以前二十年，我以为自己是很正常的，从街头小吃到包装零食到每日三餐，从来没有不能吃的。可是有天我突然病倒了，喉咙火辣辣的肿痛，口水都咽不下去，舌头发麻。当时我以为吃太多零食所致，因为那天我吃了很辣的泡椒凤爪。其实我是不怎么吃辣的。而那个泡椒凤爪真的超辣。当时我以为自己吃多了，并不知道自己对哪个食物过敏。因为不舒服我早早睡了，结果并没有睡着。肚子一阵一阵疼，非常痛苦，终于</div> </li> <li><a href="/article/58.htm" title="多线程编程之理财" target="_blank">多线程编程之理财</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E4%BA%A7%E8%80%85/1.htm">生产者</a><a class="tag" taget="_blank" href="/search/%E6%B6%88%E8%B4%B9%E8%80%85/1.htm">消费者</a><a class="tag" taget="_blank" href="/search/%E7%90%86%E8%B4%A2/1.htm">理财</a> <div>      现实生活中，我们一边工作，一边消费，正常情况下会把多余的钱存起来，比如存到余额宝，还可以多挣点钱，现在就有这个情况：我每月可以发工资20000万元 （暂定每月的1号），每月消费5000（租房+生活费）元（暂定每月的1号），其中租金是大头占90%，交房租的方式可以选择（一月一交，两月一交、三月一交），理财：1万元存余额宝一天可以赚1元钱，</div> </li> <li><a href="/article/185.htm" title="[Zookeeper学习笔记之三]Zookeeper会话超时机制" target="_blank">[Zookeeper学习笔记之三]Zookeeper会话超时机制</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a> <div>首先，会话超时是由Zookeeper服务端通知客户端会话已经超时，客户端不能自行决定会话已经超时，不过客户端可以通过调用Zookeeper.close()主动的发起会话结束请求，如下的代码输出内容 Created /zoo-739160015 CONNECTEDCONNECTED .............CONNECTEDCONNECTED CONNECTEDCLOSEDCLOSED </div> </li> <li><a href="/article/312.htm" title="SecureCRT快捷键" target="_blank">SecureCRT快捷键</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/secureCRT/1.htm">secureCRT</a><a class="tag" taget="_blank" href="/search/%E5%BF%AB%E6%8D%B7%E9%94%AE/1.htm">快捷键</a> <div>ctrl + a : 移动光标到行首ctrl + e ：移动光标到行尾crtl + b: 光标前移1个字符crtl + f: 光标后移1个字符crtl + h : 删除光标之前的一个字符ctrl + d ：删除光标之后的一个字符crtl + k ：删除光标到行尾所有字符crtl + u : 删除光标至行首所有字符crtl + w:  删除光标至行首</div> </li> <li><a href="/article/439.htm" title="Java 子类与父类这间的转换" target="_blank">Java 子类与父类这间的转换</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/java+%E7%88%B6%E7%B1%BB%E4%B8%8E%E5%AD%90%E7%B1%BB%E7%9A%84%E8%BD%AC%E6%8D%A2/1.htm">java 父类与子类的转换</a> <div>    最近同事调的一个服务报错，查看后是日期之间转换出的问题。代码里是把 java.sql.Date 类型的对象 强制转换为 java.sql.Timestamp 类型的对象。报java.lang.ClassCastException。       代码：             </div> </li> <li><a href="/article/566.htm" title="可视化swing界面编辑" target="_blank">可视化swing界面编辑</a> <span class="text-muted">朱辉辉33</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/swing/1.htm">swing</a> <div>      今天发现了一个WindowBuilder插件，功能好强大，啊哈哈，从此告别手动编辑swing界面代码，直接像VB那样编辑界面，代码会自动生成。       首先在Eclipse中点击help，选择Install New Software,然后在Work with中输入WindowBui</div> </li> <li><a href="/article/693.htm" title="web报表工具FineReport常用函数的用法总结（文本函数）" target="_blank">web报表工具FineReport常用函数的用法总结（文本函数）</a> <span class="text-muted">老A不折腾</span> <a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/web%E6%8A%A5%E8%A1%A8%E5%B7%A5%E5%85%B7/1.htm">web报表工具</a><a class="tag" taget="_blank" href="/search/%E6%8A%A5%E8%A1%A8%E8%BD%AF%E4%BB%B6/1.htm">报表软件</a><a class="tag" taget="_blank" href="/search/java%E6%8A%A5%E8%A1%A8/1.htm">java报表</a> <div>文本函数 CHAR CHAR(number):根据指定数字返回对应的字符。CHAR函数可将计算机其他类型的数字代码转换为字符。 Number:用于指定字符的数字，介于1Number:用于指定字符的数字，介于165535之间（包括1和65535）。 示例: CHAR(88)等于“X”。 CHAR(45)等于“-”。   CODE CODE(text):计算文本串中第一个字</div> </li> <li><a href="/article/820.htm" title="mysql安装出错" target="_blank">mysql安装出错</a> <span class="text-muted">林鹤霄</span> <a class="tag" taget="_blank" href="/search/mysql%E5%AE%89%E8%A3%85/1.htm">mysql安装</a> <div>[root@localhost ~]# rpm -ivh MySQL-server-5.5.24-1.linux2.6.x86_64.rpm Preparing...                #####################</div> </li> <li><a href="/article/947.htm" title="linux下编译libuv" target="_blank">linux下编译libuv</a> <span class="text-muted">aigo</span> <a class="tag" taget="_blank" href="/search/libuv/1.htm">libuv</a> <div>下载最新版本的libuv源码，解压后执行： ./autogen.sh   这时会提醒找不到automake命令，通过一下命令执行安装（redhat系用yum，Debian系用apt-get）： # yum -y install automake # yum -y install libtool     如果提示错误：make: *** No targe</div> </li> <li><a href="/article/1074.htm" title="中国行政区数据及三级联动菜单" target="_blank">中国行政区数据及三级联动菜单</a> <span class="text-muted">alxw4616</span> <div>近期做项目需要三级联动菜单,上网查了半天竟然没有发现一个能直接用的! 呵呵,都要自己填数据....我了个去这东西麻烦就麻烦的数据上. 哎,自己没办法动手写吧. 现将这些数据共享出了,以方便大家.嗯,代码也可以直接使用   文件说明 lib\area.sql -- 县及县以上行政区划分代码（截止2013年8月31日)来源：国家统计局 发布时间：2014-01-17 15:0</div> </li> <li><a href="/article/1201.htm" title="哈夫曼加密文件" target="_blank">哈夫曼加密文件</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E5%93%88%E5%A4%AB%E6%9B%BC%E5%8E%8B%E7%BC%A9/1.htm">哈夫曼压缩</a><a class="tag" taget="_blank" href="/search/%E5%93%88%E5%A4%AB%E6%9B%BC%E5%8A%A0%E5%AF%86/1.htm">哈夫曼加密</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%8F%89%E6%A0%91/1.htm">二叉树</a> <div> 在上一篇介绍过哈夫曼编码的基础知识,下面就直接介绍使用哈夫曼编码怎么来做文件加密或者压缩与解压的软件,对于新手来是有点难度的,主要还是要理清楚步骤;   加密步骤:  1,统计文件中字节出现的次数,作为权值   2,创建节点和哈夫曼树   3,得到每个子节点01串   4,使用哈夫曼编码表示每个字节   </div> </li> <li><a href="/article/1328.htm" title="JDK1.5 Cyclicbarrier实例" target="_blank">JDK1.5 Cyclicbarrier实例</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a><a class="tag" taget="_blank" href="/search/Cyclicbarrier/1.htm">Cyclicbarrier</a> <div>CyclicBarrier类 一个同步辅助类，它允许一组线程互相等待，直到到达某个公共屏障点 (common barrier point)。在涉及一组固定大小的线程的程序中，这些线程必须不时地互相等待，此时 CyclicBarrier 很有用。因为该 barrier 在释放等待线程后可以重用，所以称它为循环的 barrier。 CyclicBarrier支持一个可选的 Runnable 命令，</div> </li> <li><a href="/article/1455.htm" title="九项重要的职业规划" target="_blank">九项重要的职业规划</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>一. 学习的步伐不停止        古人说，活到老，学到老。终身学习应该是您的座右铭。        世界在不断变化，每个人都在寻找各自的事业途径。        您只有保证了足够的技能储</div> </li> <li><a href="/article/1582.htm" title="【Java范型四】范型方法" target="_blank">【Java范型四】范型方法</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>范型参数不仅仅可以用于类型的声明上，例如   package com.tom.lang.generics; import java.util.List; public class Generics<T> { private T value; public Generics(T value) { this.value = </div> </li> <li><a href="/article/1709.htm" title="【Hadoop十三】HDFS Java API基本操作" target="_blank">【Hadoop十三】HDFS Java API基本操作</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a> <div>  package com.examples.hadoop; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.FSDataInputStream; import org.apache.hadoop.fs.FileStatus; import org.apache.hadoo</div> </li> <li><a href="/article/1836.htm" title="ua实现split字符串分隔" target="_blank">ua实现split字符串分隔</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/lua+split/1.htm">lua split</a> <div>LUA并不象其它许多"大而全"的语言那样，包括很多功能，比如网络通讯、图形界面等。但是LUA可以很容易地被扩展：由宿主语言(通常是C或 C++)提供这些功能，LUA可以使用它们，就像是本来就内置的功能一样。LUA只包括一个精简的核心和最基本的库。这使得LUA体积小、启动速度快，从 而适合嵌入在别的程序里。因此在lua中并没有其他语言那样多的系统函数。习惯了其他语言的字符串分割函</div> </li> <li><a href="/article/1963.htm" title="java-从先序遍历和中序遍历重建二叉树" target="_blank">java-从先序遍历和中序遍历重建二叉树</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class BuildTreePreOrderInOrder { /** * Build Binary Tree from PreOrder and InOrder * _______7______ / \ __10__ ___2 / \ / 4</div> </li> <li><a href="/article/2090.htm" title="openfire开发指南《连接和登陆》" target="_blank">openfire开发指南《连接和登陆》</a> <span class="text-muted">开窍的石头</span> <a class="tag" taget="_blank" href="/search/openfire/1.htm">openfire</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/1.htm">开发指南</a><a class="tag" taget="_blank" href="/search/smack/1.htm">smack</a> <div>第一步     官网下载smack.jar包     下载地址：http://www.igniterealtime.org/downloads/index.jsp#smack 第二步     把smack里边的jar导入你新建的java项目中 开始编写smack连接openfire代码 p</div> </li> <li><a href="/article/2217.htm" title="[移动通讯]手机后盖应该按需要能够随时开启" target="_blank">[移动通讯]手机后盖应该按需要能够随时开启</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8/1.htm">移动</a> <div>    看到新的手机，很多由金属材质做的外壳，内存和闪存容量越来越大，CPU速度越来越快，对于这些改进，我们非常高兴，也非常欢迎      但是，对于手机的新设计，有几点我们也要注意      第一：手机的后盖应该能够被用户自行取下来，手机的电池的可更换性应该是必须保留的设计,</div> </li> <li><a href="/article/2344.htm" title="20款国外知名的php开源cms系统" target="_blank">20款国外知名的php开源cms系统</a> <span class="text-muted">cuiyadll</span> <a class="tag" taget="_blank" href="/search/cms/1.htm">cms</a> <div>内容管理系统，简称CMS，是一种简易的发布和管理新闻的程序。用户可以在后端管理系统中发布，编辑和删除文章，即使您不需要懂得HTML和其他脚本语言，这就是CMS的优点。 在这里我决定介绍20款目前国外市面上最流行的开源的PHP内容管理系统，以便没有PHP知识的读者也可以通过国外内容管理系统建立自己的网站。 1. Wordpress WordPress的是一个功能强大且易于使用的内容管</div> </li> <li><a href="/article/2471.htm" title="Java生成全局唯一标识符" target="_blank">Java生成全局唯一标识符</a> <span class="text-muted">darrenzhu</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/uuid/1.htm">uuid</a><a class="tag" taget="_blank" href="/search/unique/1.htm">unique</a><a class="tag" taget="_blank" href="/search/identifier/1.htm">identifier</a><a class="tag" taget="_blank" href="/search/id/1.htm">id</a> <div>How to generate a globally unique identifier in Java http://stackoverflow.com/questions/21536572/generate-unique-id-in-java-to-label-groups-of-related-entries-in-a-log http://stackoverflow</div> </li> <li><a href="/article/2598.htm" title="php安装模块检测是否已安装过, 使用的SQL语句" target="_blank">php安装模块检测是否已安装过, 使用的SQL语句</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div> SHOW [FULL] TABLES [FROM db_name] [LIKE 'pattern'] SHOW TABLES列举了给定数据库中的非TEMPORARY表。您也可以使用mysqlshow db_name命令得到此清单。 本命令也列举数据库中的其它视图。支持FULL修改符，这样SHOW FULL TABLES就可以显示第二个输出列。对于一个表，第二列的值为BASE T</div> </li> <li><a href="/article/2725.htm" title="5天学会一种 web 开发框架" target="_blank">5天学会一种 web 开发框架</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/framework/1.htm">framework</a> <div>web framework层出不穷，特别是ruby/python,各有10+个,php/java也是一大堆 根据我自己的经验写了一个to do list,按照这个清单，一条一条的学习，事半功倍，很快就能掌握 一共25条，即便很磨蹭，2小时也能搞定一条，25*2=50。只需要50小时就能掌握任意一种web框架 各类web框架大同小异:现代web开发框架的6大元素，把握主线，就不会迷路 建议把本文</div> </li> <li><a href="/article/2852.htm" title="Gson使用三(Map集合的处理,一对多处理)" target="_blank">Gson使用三(Map集合的处理,一对多处理)</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/gson/1.htm">gson</a><a class="tag" taget="_blank" href="/search/Gson+map/1.htm">Gson map</a><a class="tag" taget="_blank" href="/search/Gson+%E9%9B%86%E5%90%88%E5%A4%84%E7%90%86/1.htm">Gson 集合处理</a> <div>转载请出自出处：http://eksliang.iteye.com/blog/2175532 一、概述        Map保存的是键值对的形式，Json的格式也是键值对的，所以正常情况下，map跟json之间的转换应当是理所当然的事情。 二、Map参考实例 package com.ickes.json; import java.lang.refl</div> </li> <li><a href="/article/2979.htm" title="cordova实现“再点击一次退出”效果" target="_blank">cordova实现“再点击一次退出”效果</a> <span class="text-muted">gundumw100</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>基本的写法如下： document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { //navigator.splashscreen.hide(); document.addEventListener("b</div> </li> <li><a href="/article/3106.htm" title="openldap configuration leaning note" target="_blank">openldap configuration leaning note</a> <span class="text-muted">iwindyforest</span> <a class="tag" taget="_blank" href="/search/configuration/1.htm">configuration</a> <div>hostname // to display the computer name hostname <changed name> // to change go to: /etc/sysconfig/network, add/modify HOSTNAME=NEWNAME to change permenately dont forget to change /etc/hosts</div> </li> <li><a href="/article/3233.htm" title="Nullability and Objective-C" target="_blank">Nullability and Objective-C</a> <span class="text-muted">啸笑天</span> <a class="tag" taget="_blank" href="/search/Objective-C/1.htm">Objective-C</a> <div>https://developer.apple.com/swift/blog/?id=25   http://www.cocoachina.com/ios/20150601/11989.html   http://blog.csdn.net/zhangao0086/article/details/44409913   http://blog.sunnyxx</div> </li> <li><a href="/article/3360.htm" title="jsp中实现参数隐藏的两种方法" target="_blank">jsp中实现参数隐藏的两种方法</a> <span class="text-muted">macroli</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a> <div>在一个JSP页面有一个链接，//确定是一个链接?点击弹出一个页面，需要传给这个页面一些参数。//正常的方法是设置弹出页面的src="***.do?p1=aaa&p2=bbb&p3=ccc"//确定目标URL是Action来处理?但是这样会在页面上看到传过来的参数，可能会不安全。要求实现src="***.do"，参数通过其他方法传！//////</div> </li> <li><a href="/article/3487.htm" title="Bootstrap A标签关闭modal并打开新的链接解决方案" target="_blank">Bootstrap A标签关闭modal并打开新的链接解决方案</a> <span class="text-muted">qiaolevip</span> <a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E8%BF%9B%E6%AD%A5%E4%B8%80%E7%82%B9%E7%82%B9/1.htm">每天进步一点点</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%B0%B8%E6%97%A0%E6%AD%A2%E5%A2%83/1.htm">学习永无止境</a><a class="tag" taget="_blank" href="/search/bootstrap/1.htm">bootstrap</a><a class="tag" taget="_blank" href="/search/%E7%BA%B5%E8%A7%82%E5%8D%83%E8%B1%A1/1.htm">纵观千象</a> <div>Bootstrap里面的js modal控件使用起来很方便，关闭也很简单。只需添加标签 data-dismiss="modal" 即可。 可是偏偏有时候需要a标签既要关闭modal，有要打开新的链接，尝试多种方法未果。只好使用原始js来控制。   <a href="#/group-buy" class="btn bt</div> </li> <li><a href="/article/3614.htm" title="二维数组在Java和C中的区别" target="_blank">二维数组在Java和C中的区别</a> <span class="text-muted">流淚的芥末</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84/1.htm">数组</a> <div>Java代码：   public class test03 { public static void main(String[] args) { int[][] a = {{1},{2,3},{4,5,6}}; System.out.println(a[0][1]); } }  运行结果： Exception in thread "mai</div> </li> <li><a href="/article/3741.htm" title="systemctl命令用法" target="_blank">systemctl命令用法</a> <span class="text-muted">wmlJava</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/systemctl/1.htm">systemctl</a> <div>对比表，以 apache / httpd 为例 任务 旧指令 新指令 使某服务自动启动 chkconfig --level 3 httpd on systemctl enable httpd.service 使某服务不自动启动 chkconfig --level 3 httpd off systemctl disable httpd.service 检查服务状态 service h</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>