Nhấp vào bên ngoài phương thức để đóng JavaScript

Question

Theo mặc định, nếu bạn nhấp vào bên ngoài cửa sổ phương thức Bootstrap, tôi. e. trên phông nền hoặc vùng tối nó sẽ đóng lại và biến mất. Nó cũng xảy ra khi bạn đang ở trong chế độ và nhấn phím thoát trên bàn phím. Nhưng bạn có thể ngăn điều này xảy ra bằng cách đặt tùy chọn backdrop của phương thức thành static và tùy chọn keyboard thành

import { Controller } from 'stimulus'
import { useClickOutside } from 'stimulus-use'

export default class extends Controller {

  connect() {
    useClickOutside(this)
  }

  clickOutside(event) {
    // example to close a modal
    event.preventDefault()
    this.modal.close()
  }
}

0, như minh họa trong ví dụ sau

Nội dung chính Show

Câu hỏi thường gặp liên quan
Dung dịch. sử dụng phần tử. gần nhất () bên trong trình xử lý sự kiện nhấp vào tài liệu
Làm cách nào để đóng cửa sổ bật lên bằng cách nhấp vào bên ngoài bằng JavaScript?
Làm cách nào để đóng cửa sổ phương thức trong JavaScript?





Disallow Bootstrap Modal from Closing






    
    
    
    
    
        

            

                

                    
Confirmation
                    ×
                
                
                    
Do you want to save changes you made to document before closing?
                    If you don't save, your changes will be lost.
                
                
                    Close
                    Save changes

Câu hỏi thường gặp liên quan

Dưới đây là một số câu hỏi thường gặp khác liên quan đến chủ đề này

này @marckohlbrugge

FYI Tôi đã phát hành một phiên bản mới của Sử dụng Kích thích và bây giờ bạn có sẵn một bản mixin bên ngoài nhấp chuột

import { Controller } from 'stimulus'
import { useClickOutside } from 'stimulus-use'

export default class extends Controller {

  connect() {
    useClickOutside(this)
  }

  clickOutside(event) {
    // example to close a modal
    event.preventDefault()
    this.modal.close()
  }
}

github. com

sử dụng kích thích/sử dụng kích thích/blob/master/docs/sử dụng-click-bên ngoài. md

# useClickOutside

Adds one new `clickOutside` behavior to your Stimulus controller as well as a new `click:outside` event when ever a click is received outside of the controller element.

## Reference

```javascript
useClickOutside(controller, options = {})
```

**controller** : a Stimulus Controller (usually `'this'`)

**options** :

| Option| Description |           Default value               |
|-----------------------|-------------|---------------------|
| `dispatchEvent` | Whether to dispatch a `click:outside` event or not.| `true` |
| `element` | The root element listening for outside click.| The controller element|
|`eventPrefix`| Whether to prefix or not the emitted event. Can be a **boolean** or a **string**.
- **true** prefix the event with the controller identifier `card:click:outside` 
- **someString** prefix the event with the given string `someString:click:outside` 
- **false** to remove prefix  |true|
| `events` | Array of events to listen on to detect if the user clicks outside of the component.| `['click', 'touchend']` |

Tập tin này đã bị cắt bớt. hiển thị nguyên bản

Xin chào @aaron4osu, phông nền đó ban đầu không tồn tại nhưng được tạo động khi mở phương thức, vì vậy bạn sẽ phải sử dụng ủy quyền sự kiện tại đây

$(document).on('click', '.modal-backdrop', function () {
  $('.modal').modal('hide')
})

Tuy nhiên, đây thực sự phải là hành vi mặc định… bạn có ở đâu khác đang can thiệp vào logic phương thức hiện có không?

(x-đăng)

Tôi đã tạo một cửa sổ bật lên khi một nút được nhấp vào trong vanilla JavaScript. Nhưng tôi muốn tạo một cách để tôi có thể đóng cửa sổ bật lên khi người dùng nhấp vào bên ngoài cửa sổ bật lên nhưng vẫn hiển thị cửa sổ bật lên khi nhấp vào bên trong. Điều đó có thể không?

Nhấp vào bên ngoài phương thức để đóng JavaScript

Đây là một số mã tạo đầu ra ở trên


Click for popup


  Click outisde the box to close

Mã khá cơ bản. Bây giờ, hãy chuyển sang giải pháp về cách đóng cửa sổ bật lên khi được nhấp vào bên ngoài phần tử

Dung dịch. sử dụng phần tử. gần nhất () bên trong trình xử lý sự kiện nhấp vào tài liệu

import { Controller } from 'stimulus'
import { useClickOutside } from 'stimulus-use'

export default class extends Controller {

  connect() {
    useClickOutside(this)
  }

  clickOutside(event) {
    // example to close a modal
    event.preventDefault()
    this.modal.close()
  }
}

2 di chuyển đến đầu thư mục gốc của đối tượng DOM để xem liệu nó có thể tìm thấy kết quả phù hợp với bộ chọn truy vấn được cung cấp hay không


const isClosest = e.target.closest(popupQuerySelector);

Nếu

import { Controller } from 'stimulus'
import { useClickOutside } from 'stimulus-use'

export default class extends Controller {

  connect() {
    useClickOutside(this)
  }

  clickOutside(event) {
    // example to close a modal
    event.preventDefault()
    this.modal.close()
  }
}

2 tìm thấy kết quả khớp, nó sẽ trả về phần tử nếu không nó sẽ trả về

Bây giờ tôi biết đó là công cụ tôi muốn sử dụng, tôi cần đính kèm tài liệu đó với

import { Controller } from 'stimulus'
import { useClickOutside } from 'stimulus-use'

export default class extends Controller {

  connect() {
    useClickOutside(this)
  }

  clickOutside(event) {
    // example to close a modal
    event.preventDefault()
    this.modal.close()
  }
}

4. Hãy xem điều này được đưa vào thực tế như thế nào


document.addEventListener("click", (e) => {
  // Check if the filter list parent element exist
  const isClosest = e.target.closest(popupQuerySelector);

  // If `isClosest` equals falsy & popup has the class `show`
  // then hide the popup
  if (!isClosest && popupEl.classList.contains("show")) {
    popupEl.classList.remove("show");
  }
});

Hãy phân tích mã. Bước đầu tiên là tạo đính kèm trình lắng nghe sự kiện nhấp chuột vào tài liệu

Tôi muốn làm điều này vì tôi muốn nắm bắt mọi thứ trong trang để đảm bảo người dùng nhấp vào bên ngoài phần tử bật lên

Dòng mã tiếp theo đang sử dụng

import { Controller } from 'stimulus'
import { useClickOutside } from 'stimulus-use'

export default class extends Controller {

  connect() {
    useClickOutside(this)
  }

  clickOutside(event) {
    // example to close a modal
    event.preventDefault()
    this.modal.close()
  }
}

5 và bên dưới dòng đó, tôi đang thực hiện điều kiện IF để xem liệu

import { Controller } from 'stimulus'
import { useClickOutside } from 'stimulus-use'

export default class extends Controller {

  connect() {
    useClickOutside(this)
  }

  clickOutside(event) {
    // example to close a modal
    event.preventDefault()
    this.modal.close()
  }
}

5 có trả về hay không và liệu phần tử bật lên hiện có lớp

import { Controller } from 'stimulus'
import { useClickOutside } from 'stimulus-use'

export default class extends Controller {

  connect() {
    useClickOutside(this)
  }

  clickOutside(event) {
    // example to close a modal
    event.preventDefault()
    this.modal.close()
  }
}

7 hay không, nếu có, hãy ẩn phần bật lên

Tôi thích tweet về JavaScript và đăng các đoạn mã hữu ích. Theo tôi ở đó nếu bạn cũng muốn một số

Làm cách nào để đóng cửa sổ bật lên bằng cách nhấp vào bên ngoài bằng JavaScript?

// Từ http. //jsfiddle. mạng/LxauG/606/

$(". liên kết"). nhấp (chức năng (e) {

e. ngăn chặn Mặc định();

$(". cửa sổ bật lên"). fadeIn(300,function(){$(this). tiêu điểm();});

$('. đóng lại'). nhấp (hàm () {

$(". cửa sổ bật lên"). fadeOut(300);

Làm cách nào để đóng cửa sổ phương thức trong JavaScript?

Bạn cũng có thể sử dụng phương pháp ẩn JavaScript . Nhấp vào nút để khởi chạy phương thức. Sau đó bấm vào phông nền, biểu tượng đóng hoặc nút đóng để đóng phương thức.

programming javascript

Nhấp vào bên ngoài phương thức để đóng JavaScript

Confirmation

Câu hỏi thường gặp liên quan

sử dụng kích thích/sử dụng kích thích/blob/master/docs/sử dụng-click-bên ngoài. md

Dung dịch. sử dụng phần tử. gần nhất () bên trong trình xử lý sự kiện nhấp vào tài liệu

Làm cách nào để đóng cửa sổ bật lên bằng cách nhấp vào bên ngoài bằng JavaScript?

Làm cách nào để đóng cửa sổ phương thức trong JavaScript?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội