การเขียนโปรแกรม dom-events

9

ตรวจจับการเปลี่ยนแปลงขนาดหน้าต่างแบบเรียลไทม์ใน Angular 4

ฉันพยายามสร้างแถบนำทางที่ตอบสนองและไม่ต้องการใช้คิวรีสื่อดังนั้นฉันตั้งใจจะใช้*ngIFขนาดหน้าต่างเป็นเกณฑ์ แต่ฉันประสบปัญหาเนื่องจากไม่พบวิธีการหรือเอกสารใด ๆ เกี่ยวกับการตรวจจับขนาดหน้าต่าง Angular 4 ฉันได้ลองใช้วิธี JavaScript แล้ว แต่ไม่รองรับ ฉันได้ลองทำสิ่งต่อไปนี้แล้ว : constructor(platform: Platform) { platform.ready().then((readySource) => { console.log('Width: ' + platform.width()); console.log('Height: ' + platform.height()); }); } ... ซึ่งใช้ในไอออนิก และscreen.availHeightแต่ก็ยังไม่ประสบความสำเร็จ

118 html angular dom-events

14

วิธีตรวจสอบว่ามีตัวฟังเหตุการณ์ที่แนบแบบไดนามิกอยู่หรือไม่?

นี่คือปัญหาของฉัน: เป็นไปได้ไหมที่จะตรวจสอบว่ามีตัวฟังเหตุการณ์ที่แนบแบบไดนามิกอยู่หรือไม่? หรือฉันจะตรวจสอบสถานะของคุณสมบัติ "onclick" (?) ใน DOM ได้อย่างไร ฉันค้นหาอินเทอร์เน็ตเช่นเดียวกับ Stack Overflow เพื่อหาวิธีแก้ปัญหา แต่ไม่มีโชค นี่คือ html ของฉัน: <a id="link1" onclick="linkclick(event)"> link 1 </a> <a id="link2"> link 2 </a>  จากนั้นใน Javascript ฉันแนบตัวฟังเหตุการณ์ที่สร้างขึ้นแบบไดนามิกไปยังลิงก์ที่ 2: document.getElementById('link2').addEventListener('click', linkclick, false); รหัสทำงานได้ดี แต่ความพยายามทั้งหมดของฉันในการตรวจจับตัวฟังที่แนบมานั้นล้มเหลว: // test for #link2 - dynamically created eventlistener …

113 javascript testing addeventlistener dom-events

13

เป็นไปได้ไหมที่จะต่อท้าย innerHTML โดยไม่ทำลายผู้ฟังเหตุการณ์ของลูกหลาน?

ในโค้ดตัวอย่างต่อไปนี้ฉันแนบonclickตัวจัดการเหตุการณ์เข้ากับช่วงที่มีข้อความ "foo" alert()จัดการเป็นฟังก์ชั่นที่ไม่ระบุชื่อที่ปรากฏขึ้น อย่างไรก็ตามหากฉันกำหนดให้กับโหนดหลักตัวจัดการเหตุการณ์innerHTMLนี้onclickจะถูกทำลาย - การคลิก "foo" จะไม่ปรากฏขึ้นในกล่องการแจ้งเตือน สามารถแก้ไขได้หรือไม่? <html> <head> <script type="text/javascript"> function start () { myspan = document.getElementById("myspan"); myspan.onclick = function() { alert ("hi"); }; mydiv = document.getElementById("mydiv"); mydiv.innerHTML += "bar"; } </script> </head> <body onload="start()"> <div id="mydiv" style="border: solid red 2px"> <span id="myspan">foo</span> </div> </body> </html>

112 javascript html innerhtml dom-events

10

จะดูการเปลี่ยนแปลงอาร์เรย์ได้อย่างไร?

ใน Javascript มีวิธีการแจ้งเตือนเมื่อมีการแก้ไขอาร์เรย์โดยใช้การกำหนดแบบพุชป๊อปกะหรือดัชนีหรือไม่ ฉันต้องการสิ่งที่จะจุดไฟให้เหตุการณ์ที่ฉันสามารถจัดการได้ ฉันรู้เกี่ยวกับwatch()ฟังก์ชันการทำงานใน SpiderMonkey แต่จะใช้ได้ก็ต่อเมื่อตัวแปรทั้งหมดถูกตั้งค่าเป็นอย่างอื่น

111 javascript dom-events

11

เคล็ดลับ Javascript สำหรับ "วางเป็นข้อความธรรมดา" ใน execCommand

ฉันมีเครื่องมือแก้ไขพื้นฐานตามexecCommandตัวอย่างที่แนะนำที่นี่ มีสามวิธีในการวางข้อความภายในexecCommandพื้นที่: Ctrl+V คลิกขวา -> วาง คลิกขวา -> วางเป็นข้อความธรรมดา ฉันต้องการอนุญาตให้วางเฉพาะข้อความธรรมดาโดยไม่ต้องมาร์กอัป HTML ฉันจะบังคับให้สองการกระทำแรกวางข้อความธรรมดาได้อย่างไร วิธีแก้ไขที่เป็นไปได้:วิธีที่ฉันคิดได้คือการตั้งค่า Listener สำหรับเหตุการณ์การกดแป้นสำหรับ ( Ctrl+ V) และแถบแท็ก HTML ก่อนวาง เป็นทางออกที่ดีที่สุดหรือไม่? มันกันกระสุนเพื่อหลีกเลี่ยงมาร์กอัป HTML ใด ๆ ในการวางหรือไม่ วิธีเพิ่ม Listener ในคลิกขวา -> Paste?

107 javascript html dom-events execcommand

5

รับฟังเหตุการณ์ที่แนบมากับโหนดโดยใช้ addEventListener

ฉันได้ดูคำถามเหล่านี้แล้ว: จะค้นหาตัวฟังเหตุการณ์บนโหนด DOM เมื่อทำการดีบักหรือจากโค้ด JavaScript ได้อย่างไร ฉันสามารถตรวจสอบและแก้ไขตัวจัดการเหตุการณ์ Javascript บนองค์ประกอบ html โดยทางโปรแกรมได้หรือไม่ วิธีดีบักการผูกเหตุการณ์ JavaScript / jQuery ด้วย Firebug (หรือเครื่องมือที่คล้ายกัน) อย่างไรก็ตามไม่มีใครตอบได้ว่าจะรับรายชื่อผู้ฟังเหตุการณ์ที่เชื่อมต่อกับโหนดได้addEventListenerอย่างไรโดยไม่ต้องแก้ไขaddEventListenerต้นแบบก่อนที่จะสร้างตัวฟังเหตุการณ์ VisualEventไม่แสดงตัวฟังเหตุการณ์ทั้งหมด (เฉพาะสำหรับ iPhone) และฉันต้องการทำสิ่งนี้ (ค่อนข้าง) โดยใช้โปรแกรม

107 javascript dom-events

14

removeEventListener บนฟังก์ชันที่ไม่ระบุชื่อใน JavaScript

ฉันมีวัตถุที่มีวิธีการอยู่ในนั้น วิธีการเหล่านี้ใส่ลงในวัตถุภายในฟังก์ชันที่ไม่ระบุตัวตน ดูเหมือนว่า: var t = {}; window.document.addEventListener("keydown", function(e) { t.scroll = function(x, y) { window.scrollBy(x, y); }; t.scrollTo = function(x, y) { window.scrollTo(x, y); }; }); (มีรหัสมากกว่านี้มาก แต่ก็เพียงพอที่จะแสดงปัญหา) ตอนนี้ฉันต้องการหยุดผู้ฟังเหตุการณ์ในบางกรณี ดังนั้นฉันจึงพยายามทำ removeEventListener แต่ฉันคิดไม่ออกว่าจะทำอย่างไร ฉันได้อ่านในคำถามอื่น ๆ ว่าไม่สามารถเรียก removeEventListener ในฟังก์ชันที่ไม่ระบุชื่อได้ แต่ในกรณีนี้ก็เป็นเช่นกันหรือไม่ ฉันมีวิธีการใน t ที่สร้างขึ้นภายในฟังก์ชันที่ไม่ระบุตัวตนดังนั้นฉันจึงคิดว่ามันเป็นไปได้ มีลักษณะดังนี้: t.disable = function() { window.document.removeEventListener("keydown", this, false); …

107 javascript safari dom-events anonymous-function

13

คุณวางเมาส์ใน ReactJS ได้อย่างไร - onMouseLeave ไม่ได้ลงทะเบียนระหว่างการวางเมาส์เหนืออย่างรวดเร็ว

คุณจะบรรลุเหตุการณ์โฮเวอร์หรือเหตุการณ์ที่ใช้งานอยู่ใน ReactJS ได้อย่างไรเมื่อคุณจัดแต่งทรงผมแบบอินไลน์ ฉันพบว่าวิธี onMouseEnter, onMouseLeave นั้นมีปัญหาดังนั้นหวังว่าจะมีวิธีอื่นในการทำเช่นนั้น โดยเฉพาะอย่างยิ่งหากคุณวางเมาส์เหนือส่วนประกอบอย่างรวดเร็วระบบจะลงทะเบียนเฉพาะเหตุการณ์ onMouseEnter เท่านั้น onMouseLeave ไม่เคยเริ่มทำงานและทำให้ไม่สามารถอัปเดตสถานะได้ ... ปล่อยให้ส่วนประกอบปรากฏราวกับว่ายังคงถูกวางเมาส์ไว้ ฉันสังเกตเห็นสิ่งเดียวกันนี้หากคุณลองเลียนแบบ css pseudo-class ": active" หากคุณคลิกเร็วจริงเฉพาะเหตุการณ์ onMouseDown เท่านั้นที่จะลงทะเบียน เหตุการณ์ onMouseUp จะถูกละเว้น ... ปล่อยให้คอมโพเนนต์ทำงานอยู่ นี่คือ JSFiddle ที่แสดงปัญหา: https://jsfiddle.net/y9swecyu/5/ วิดีโอของ JSFiddle ที่มีปัญหา: https://vid.me/ZJEO รหัส: var Hover = React.createClass({ getInitialState: function() { return { hover: false }; }, onMouseEnterHandler: …

107 javascript css reactjs mouseevent dom-events

12

คุณบันทึกเหตุการณ์ทั้งหมดที่ยิงโดยองค์ประกอบใน jQuery ได้อย่างไร

ฉันต้องการเห็นเหตุการณ์ทั้งหมดที่เกิดจากไฟล์ ป้อนข้อมูลเมื่อผู้ใช้โต้ตอบกับเหตุการณ์นั้น ซึ่งรวมถึงสิ่งต่างๆเช่น: คลิกที่มัน คลิกปิดมัน แตะลงไป หลีกหนีจากมัน Ctrl+ CและCtrl+Vบนแป้นพิมพ์ คลิกขวา -> วาง คลิกขวา -> ตัด คลิกขวา -> คัดลอก การลากและวางข้อความจากแอปพลิเคชันอื่น แก้ไขด้วย Javascript แก้ไขด้วยเครื่องมือดีบักเช่น Firebug ฉันต้องการแสดงโดยใช้console.logไฟล์. เป็นไปได้ไหมใน Javascript / jQuery และถ้าเป็นเช่นนั้นฉันจะทำอย่างไร

96 javascript jquery events dom-events

5

ตอบสนอง onClick - ส่งผ่านเหตุการณ์ด้วยพารามิเตอร์

ไม่มีพารามิเตอร์ function clickMe(e){ //e is the event } <button onClick={this.clickMe}></button> ด้วยพารามิเตอร์ function clickMe(parameter){ //how to get the "e" ? } <button onClick={() => this.clickMe(someparameter)}></button> ฉันต้องการรับไฟล์event. ฉันจะรับมันได้อย่างไร?

93 javascript reactjs events dom-events

11

ฉันจะทำให้ฟังก์ชันการเปลี่ยน CSS3 เป็นปกติในเบราว์เซอร์ได้อย่างไร

เหตุการณ์สิ้นสุดการเปลี่ยนแปลงของ Webkit เรียกว่า webkitTransitionEnd, Firefox คือ transitionEnd โอเปร่าคือ oTransitionEnd วิธีที่ดีในการจัดการกับ JS ทั้งหมดคืออะไร? ฉันควรดมเบราว์เซอร์หรือไม่? หรือใช้แต่ละอันแยกกัน? วิธีอื่นที่ไม่ได้เกิดขึ้นกับฉัน? กล่าวคือ: //doing browser sniffing var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd"; element.addEventListener(transitionend, function(){ //do whatever },false); หรือ // Assigning an event listener per browser element.addEventListener("webkitTransitionEnd", fn); element.addEventListener("oTransitionEnd", fn); …

91 javascript css css-transitions dom-events

8

DOM และ BOM ใน JavaScript คืออะไร?

DOM และ BOM ใน JavaScript คืออะไร? ถ้ามีคนอธิบายสิ่งเหล่านี้ในแง่คนธรรมดาได้คงจะดีมาก! ฉันต้องการทำความเข้าใจอย่างลึกซึ้งเกี่ยวกับสิ่งเหล่านี้

90 javascript dom dom-events

6

จัดการเหตุการณ์การเปลี่ยนแปลงจุดยึด URL ใน js

ฉันจะเขียนโค้ดเรียกกลับ JavaScript ที่จะดำเนินการกับการเปลี่ยนแปลงใด ๆ ในจุดยึด URL ได้อย่างไร ตัวอย่างเช่นจากhttp://example.com#aถึงhttp://example.com#b

90 javascript event-handling dom-events fragment-identifier hashchange

6

ใน React ความแตกต่างระหว่าง onChange และ onInput คืออะไร?

ฉันได้ลองค้นหาคำตอบสำหรับสิ่งนี้แล้ว แต่ส่วนใหญ่อยู่นอกบริบทของการตอบสนองซึ่งonChangeทำให้เกิดความเบลอ ในการทดสอบหลาย ๆ ครั้งฉันไม่สามารถบอกได้ว่าเหตุการณ์ทั้งสองนี้แตกต่างกันอย่างไร (เมื่อนำไปใช้กับพื้นที่ข้อความ) ใครช่วยให้ความกระจ่างเกี่ยวกับเรื่องนี้บ้าง?

89 javascript reactjs dom-events

12

html <input type =“ text” /> เหตุการณ์ onchange ไม่ทำงาน

ฉันกำลังพยายามทำการทดลองบางอย่าง สิ่งที่ฉันต้องการให้เกิดขึ้นคือทุกครั้งที่ผู้ใช้พิมพ์บางอย่างในกล่องข้อความสิ่งนั้นจะปรากฏในกล่องโต้ตอบ ฉันใช้onchangeคุณสมบัติเหตุการณ์เพื่อทำให้มันเกิดขึ้น แต่ไม่ได้ผล ฉันยังคงต้องกดปุ่มส่งเพื่อให้มันใช้งานได้ ฉันอ่านเกี่ยวกับ AJAX และฉันคิดจะเรียนรู้เกี่ยวกับเรื่องนี้ ฉันยังต้องการ AJAX เพื่อให้มันใช้งานได้หรือ JavaScript แบบธรรมดาเพียงพอหรือไม่ กรุณาช่วย. index.php <script type="text/javascript" src="javascript.js"> </script> <form action="index.php" method="get"> Integer 1: <input type="text" id="num1" name="num1" onchange="checkInput('num1');" /> <br /> Integer 2: <input type="text" id="num2" name="num2" onchange="checkInput('num2');" /> <br /> <input type="submit" value="Compute" /> </form> javascript.js function checkInput(textbox) …

88 javascript dom-events

คำถามติดแท็ก dom-events