亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何將 jQuery 代碼轉換為 JavaScript?

如何將 jQuery 代碼轉換為 JavaScript?

瀟湘沐 2022-12-22 12:58:10
查詢:var isResizing = false,    lastDownX = 0;$(function () {    var container = $('#container'),        top = $('#top-panel'),        handle = $('#drag');    handle.on('mousedown', function (e) {        isResizing = true;        lastDownX = e.clientY;    });    $(document).on('mousemove', function (e) {        // we don't want to do anything if we aren't resizing.        if (!isResizing)             return;        var offsetRight = top.height() + (e.clientY - container.offset().top);        top.css('top', offsetRight);    }).on('mouseup', function (e) {        // stop resizing        isResizing = false;    });});腳本:var isResizing = false// eslint-disable-next-line no-unused-varsvar lastDownX = 0function resizeVerticallyInit () {  var top = document.querySelector('#topology-container')  var handle = document.querySelector('#drag')  handle.addEventListener('mousedown', function (e) {    isResizing = true    lastDownX = e.clientY  })  document.addEventListener('mousemove', function (e) {    // we don't want to do anything if we aren't resizing.    if (!isResizing) {      return    }    var offsetRight = top.height() + 20    document.querySelector('#topology-container').style.top = offsetRight  })  document.addEventListener('mouseup', function (e) {    // stop resizing    isResizing = false  })}mounted () {  ...  resizeVerticallyInit()}如您所見,我在 mounted() 生命周期方法中的 Vue.js 組件中使用了 JavaScript 函數。我試圖轉換它,但它不起作用。首先我需要說:// eslint-disable-next-line no-unused-varsvar lastDownX = 0我不知道為什么它會抱怨 lastDownX 未被使用。第二個是錯誤:"[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'addEventListener' of null"它抱怨:  handle.addEventListener('mousedown', function (e) {    isResizing = true    lastDownX = e.clientY  })有人可以幫忙轉換嗎?
查看完整描述

1 回答

?
紫衣仙女

TA貢獻1839條經驗 獲得超15個贊

如果元素不存在于 DOM 中,則First ofdocument.querySelector方法將返回。null您不能調用addEventListenernull。它之所以起作用,jQuery是因為 jquery 構造了一個單獨的對象(稱為 jQuery 對象)。一個 jQuery 對象看起來有點像這樣:


{

  0: {...} // HTMLElement reference

  length: 1

} // jQuery object

該對象公開了一個 jQuery API,它具有on事件處理方法(無論是否存在實際 DOM 元素都可用)。這是 jQuery 的優點(也是缺點)。


另一方面,查詢選擇器方法返回HTMLElement. 如果該元素不存在于 DOM 中,則null返回。


現在假設該元素將在一定時間后出現在 DOM 中,您可以做兩件事:


等待元素出現在 DOM 中,一旦它可用,就添加一個監聽器函數。

在 JavaScript 中使用live事件(事件委托)。

我將向您展示第二種方法:

setTimeout(() => {

  document.querySelector('#container').innerHTML = `<button id="btn">Click</button>`;

}, 3000);


document.addEventListener('click', (e) => {

  if (e.target.id === 'btn') {

    alert('Click works!');

  }

});

<div id="container">

  A button will appear after 3 seconds. However, click event would still work.

</div>

如您所見,我正在使用e.target它來檢測我在文檔中單擊了哪個元素(我附加了偵聽器的位置)。一旦條件匹配,它就會觸發alert. 這允許我們為最初不存在于 DOM 中的元素綁定事件。



查看完整回答
反對 回復 2022-12-22
  • 1 回答
  • 0 關注
  • 122 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號