javascript - 单击页面中除两个元素之外的任何元素时执行函数(在 jQuery Mobile、jQM 中)

Question

单击页面中除两个元素(id='link1'、id='link2')之外的任何元素(id='home_page')时执行函数。这两个元素具有不同的单击执行功能。

下面是我尝试过但不成功的两个 jQuery 代码。代码1:

$( document ).on("pageinit", '#home_page', function () { 
    $('#home_page').not('#link1, #link2').click(function(){
       alert();
    });
});

代码2:

$( document ).on("pageinit", '#home_page', function () { 
    $('#home_page:not(#link1, #link2)').click(function(){
       alert();
    });
});

以下是该页面的 jQM 代码:

<div data-role="page" id="home_page">

    <div data-role="header" data-theme="a" ><!-- Header -->
        <a id='link1' href="/done" rel="external">Home</a>
        <a id='link2' href="/exit" rel="external">Exit</a>
    </div><!-- Header -->

    <div data-role="content">
        <p>Home Page</p>
        <!-- Other elements -->
    </div>
</div>

Answer 1

我认为您应该使用 .on() 方法来绑定(bind)事件，并且按照其他答案中的建议，您缺少结束标记 }); 用于 click 事件:

$( document ).on("pageinit", '#home_page', function () { 
   $('#home_page').not('#link1, #link2').on('click touchstart', function(){
      alert(); //---try adding "touchstart"--------^^^^^^^^^^
   });
});

并确保仅当您已绑定(bind)时，您已使用 event.stopPropagation(); 停止事件在 '#link1, #link2' 链接上冒泡这些链接的一些 js 事件。

<小时/>

根据您的评论，我刚刚带来了这个:

$(function () {
    $('#home_page').not('#link1, #link2').click(function () {
        alert('page clicked');
    });

    $('#link1, #link2').click(function (e) {
        e.stopPropagation(); //<---stops the event to bubble up
    });
});

我注意到你提到了你的 anchor 标记的href到http://www.google.com/，在我看来，导航到谷歌在 fiddle 中不起作用，而其他链接工作正常。

<小时/>

尝试将第一个链接的 href 更改为:

    <a id='link1' href="http://www.apple.com/mac/" rel="external">link1</a>
    <a id='link2' href="http://www.apple.com/" rel="external">link2</a>

<小时/>

Demo @ Fiddle