我如何定位一個div並且它是處理點擊的孩子？

我有一個<div class="stock"></div>纏：我如何定位一個div並且它是處理點擊的孩子？

<div class="stockAdd"></div> 
<div class="stockRemove"></div> 
<div class="stockInput"></div>

我想阻止我.stock內點擊觸發功能。現在我有以下幾點：

if ($(event.target).is('.stockInput') || $(event.target).is('.stockAdd') || $(event.target).is('.stockRemove')) { 
     console.log("Ajout stock"); 
     return 
    }

沒有更好的方法來選擇thos三個div嗎？ $(event.target).is('.stock')在單擊我的嵌套div時沒有完成工作。

感謝

來源

2016-03-02 Aod Ren

如果我理解正確的話，你想趕上點擊.stockAdd事件，.stockRemove和.stockInput，但不是在其他元素在.stock本身內，是否正確？

如果是這樣，委派事件可以照顧，沒有任何需要手動檢查活動對象：

$('.stock').on('click', '.stockAdd, .stockRemove, .stockInput', function() { 
 
    alert("Clicked"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="stock"> 
 
    <div class="stockAdd">stockAdd</div> 
 
    <div class="stockRemove">stockRemove</div> 
 
    <div class="stockInput">stockInput</div> 
 
    <div>No event</div> 
 
</div>

我會強烈建議對視event.target這裏;它太脆弱了。嵌套在您的預期目標將打破東西的任何HTML標籤：

$('.stock').on('click', function(event) { 
 
    if (event.target.className=="stockAll") { 
 
    alert("clicked"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="stock"> 
 
    <div class="stockAll"> 
 
    This <b> will not work if someone clicks in the bold area</b> but works outside 
 
    </div> 
 
</div>

來源

2016-03-02 16:22:25

您可以添加一個單獨的類來個個像.stock-inner，然後抓住他們所有$('.stock-inner')或者您可以使用一個$("div[class^='stock-inner']) - 這會搶父.stock格...

而且，拒絕你想要使用的處理程序中的點擊事件e.preventDefault()其中e是事件對象。

來源

2016-03-02 15:50:16 Phil

它不嵌套的div很好地工作的原因是他們通過有條件if在你的榜樣，使之更爲嚴格，你可以添加的div選擇器：

if ($(event.target).is('div.stockInput') || $(event.target).is('div.stockAdd') || $(event.target).is('div.stockRemove'))

來源

2016-03-02 16:04:53 maioman

您可以在.stock附加事件然後使用event.target進行過濾。

HTML

<div class="stock" style="border: 10px solid #000;"> 
    <div class="stockAdd">Add</div> 
    <div class="stockRemove">Remove</div> 
    <div class="stockInput">Input</div> 
</div>

的JavaScript

$('.stock').on('click', function(e) { 

    if(e.target.className !== 'stock') { 
    console.log(e.target.className); 
    } 

});

jsfiddle

來源

2016-03-02 16:09:09 TeaCode

我如何定位一個div並且它是處理點擊的孩子？

回答

相關問題