2010-07-13 26 views
6

Tôi đã thiết kế trang web có menu ban đầu không nhìn thấy được. Khi người dùng nhấp vào nút, menu sẽ hiển thị. Có hai cách cho người sử dụng để ẩn menu hiện nay có thể nhìn thấy:Số phát hành sự kiện trên thiết bị di động Safari

  1. Nhấp vào nút đó gây ra menu để trở nên hữu hình
  2. Bấm bất cứ nơi nào trên trang web mà không phải là đơn

Cách tôi đã mã hóa tùy chọn thứ hai là kết hợp sự kiện onclick với thành phần cửa sổ và so sánh nơi người dùng nhấp vào vị trí của menu để xác định xem menu có bị ẩn hay không. Điều này hoạt động tốt trong Firefox và Safari, nhưng nó không thành công trong Mobile Safari.

Tôi nhận thấy rằng cửa sổ sự kiện onclick chỉ kích hoạt khi tôi nhấp vào một yếu tố khác có sự kiện onclick đã được chỉ định. Nếu tôi nhấp vào một phần tử không có sự kiện nào được chỉ định, sự kiện onclick của cửa sổ sẽ không bao giờ xảy ra. Nếu tôi nhấp vào nút hiển thị menu, nó sẽ kích hoạt cùng với sự kiện gắn với nút.

Có thể chỉ định sự kiện cho thành phần cửa sổ trong Mobile Safari không?

Trả lời

0

Bạn chỉ có thể thêm onclick="void(0);" vào một số <div> bao gồm toàn bộ trang để không có vấn đề gì, bạn luôn nhấp vào yếu tố có sự kiện onclick. Không phải là một giải pháp tuyệt vời, mặc dù.

Tôi không muốn sự kiện onclick được gắn với cửa sổ. Tại sao bạn không tạo vùng chứa <div> có sự kiện đó trên đó. Sau đó xử lý nó giống như bạn hiện đang có.

7

Tôi đã gặp phải vấn đề tương tự này. Đây là những gì làm việc cho tôi. (Lưu ý: Tôi đang làm việc trong bối cảnh Modernizr và jQuery)

Đầu tiên, tôi thêm một lớp Modernizr tùy chỉnh sử dụng Modernizr's addTest Plugin API để kiểm tra iOS, điều này sẽ thêm lớp appleios hoặc no-appleios tương ứng.

Vì trong nghiên cứu của mình, body dường như kích hoạt sự kiện trên chương trình làm việc riêng của nó, tôi đang đề phòng một chút bằng cách gói tất cả nội dung của tài liệu với một phần tử trong ngữ cảnh iOS. Sau đó, tôi thêm một trình xử lý sự kiện vào phần tử này.

$(".appleios body").wrapInner('<div id="appleios-helper" />'); 
$("#appleios-helper").bind("mouseup", function(){return;}); 

Điều được đề xuất trước đó trong chuỗi này đang sử dụng void(0). Tôi đã làm một số thử nghiệm nhanh chóng, và thấy rằng void(0) là sự kiện chỉ không gây ra chạm trên cơ thể được công nhận. Khi tôi cắm vào chức năng "trống" của riêng tôi dưới dạng function(){return;}, mọi thứ bắt đầu hoạt động. Điều này tất cả các bản lề trên thực tế là không có sự kiện được bắn trong Mobile Safari trừ khi các yếu tố rõ ràng có các sự kiện để bắn (Safari Web Content Guide.) Bằng cách chèn sự kiện trống này trên wrapper, mọi thứ sẽ bong bóng lên đến cơ thể.

Nếu bạn đang làm JavaScript eo biển với không ai trong số các thư viện, tác dụng tương tự có thể đạt được trong đánh dấu HTML

<html> 
... 
<body> 
<div id="appleios-helper" onmouseup="function(){return;}"> 
... 
</div> 
</body> 
</html> 

này làm việc cho tôi để ẩn tooltips khi chạm vào bất cứ nơi nào trên cơ thể của tài liệu. Số dặm của bạn có thể thay đổi.

1

Đơn giản chỉ cần thêm các handler onclick giả để phần nội dung html công trình cho tôi:

<body onclick="void(0)"> 

Lưu ý rằng tôi sử dụng thông thường xử lý sự kiện trực tiếp như hình dưới đây:

function liveHandler(event) { 
    var target = event.target; ...} 

window.addEventListener(evtype, liveHandler, true); 
// evtype such as 'mousedown' or 'click' 
// we use the capturing mode here (third parameter true) 
1

Đây là một câu hỏi cũ, nhưng tôi đã vật lộn với điều tương tự ngày hôm nay.

Tôi thấy rằng việc sử dụng các sự kiện touchstart sự kiện.

Tôi giải quyết nó như thế này:

var isTouchDevice = 'ontouchstart' in document.documentElement; 
if (isTouchDevice) { 
    // Do touch related stuff 
    $(document).on('touchstart', function (event) { 
    // Do stuff 
    }); 
} else { 
    // Do non-touch related stuff 
    $(document).on('click', function() { 
    // Do stuff 
    }); 
} 
0

Bạn cũng có thể:

$('body').css('cursor', 'pointer'); 

Không có ý tưởng gì những "kỹ sư" tại Apple đang làm. LOL.

Điều này có vấn đề. Bạn sẽ không muốn làm điều này trên mọi thiết bị cảm ứng. Chỉ chạm vào các thiết bị không có thiết bị trỏ (ví dụ: Máy tính xách tay có Màn hình cảm ứng).

Nguồn: http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

Kết luận của bài viết là:

Vì vậy, tôi không hiểu tại sao tất cả điều này là trường hợp, nhưng nó chắc chắn nhất là trường hợp. Nếu bạn đang gặp vấn đề về bong bóng, chỉ cần thêm trình xử lý sự kiện có chức năng trống vào bất kỳ vị trí nào giữa phần thân và phần tử và bạn đã sẵn sàng sử dụng. Nhưng nó không cần thiết.

Các vấn đề liên quan