点击javascript createn div上的事件

时间:2016-04-27 06:26:16

标签: javascript html

这里我有一个HTML

var docuList;
function getList(){
            var context = new SP.ClientContext('/');
            var oColl = context.get_web().get_lists().getByTitle('Test');
            var Query = new SP.CamlQuery();

            Query.set_viewXml("<View><Query><OrderBy><FieldRef Name=\"Created\" Ascending=\"FALSE\" /></OrderBy></Query><ViewFields><FieldRef Name=\"FileLeafRef\" /><FieldRef Name=\"FileRef\" /></ViewFields></View>");
            docuList = oColl.getItems(Query);

            context.load(docuList);
            context.executeQueryAsync(successCall, failCall);
    }

function successCall(res,arg){
        var litToIter = docuList.getEnumerator();
        while (litToIter.moveNext()) {
            var item = litToIter.get_current();
             var DocUrl = item.get_item("FileRef");
             console.log(DocUrl);  // My list of documents which I added 
        }   
    }

javascript函数用于greating一个subdiv

<div style="width: 200px;height:200px;padding:50px;background-color: lightcyan" id="maindiv" onclick="subdiv()"></div>

在这里我希望在document.getElementById('subdiv')之外做一个事件:

function subdiv() {
    var p = document.getElementById('maindiv');
    var s = document.createElement('div');
    s.setAttribute('id','subdiv');
    p.appendChild(s);
    var s2 = document.getElementById('subdiv');
    s2.style.height = '100px';
    s2.style.width = '100px';
    s2.style.backgroundColor = 'green';
}

如何避免警告('hello world')对点击细分的反应,以及如何做,在细分外的每次点击中都能正常工作?我喜欢没有jquery的简单响应。 https://jsfiddle.net/hx2u6j35/ 谢谢。

4 个答案:

答案 0 :(得分:1)

  

使用client.Connect("imap.gmail.com", 993); client.Authenticate("spyperson", "secret-word"); var inbox = client.Inbox; inbox.Open(FolderAccess.ReadOnly); Console.WriteLine("Total messages: {0}", inbox.Count); Console.WriteLine("Recent messages: {0}", inbox.Recent); var uids = inbox.Search(SearchQuery.NotSeen); foreach (var summary in inbox.Fetch(uids, MessageSummaryItems.Full | MessageSummaryItems.UniqueId | MessageSummaryItems.Flags)) { Console.WriteLine("[summary] {0:D2}: {1}:{2}", summary.Index, summary.Envelope.Subject, summary.Flags); } 抓取调用event.target的元素。

event
function subdiv() {
  var p = document.getElementById('maindiv');
  var s = document.createElement('div');
  s.setAttribute('id', 'subdiv');
  p.appendChild(s);
  var s2 = document.getElementById('subdiv');
  s2.style.height = '100px';
  s2.style.width = '100px';
  s2.style.backgroundColor = 'green';
}

document.addEventListener('click', function(e) {
  if (e.target.id == 'maindiv') {
    alert('hello world');
  }
});

答案 1 :(得分:1)

您需要通过将另一个参数传递给事件处理程序

来禁用event-capturing
document.addEventListener('click',function() {
    alert('hello world');
}, false);

答案 2 :(得分:1)

首先,运行此代码时出错。“细分”功能不适用于“onclick”功能..

使用以下命令删除onclick属性:

document.addEventListener('click',function( _event ) {
    if( _event.target.id === "maindiv" ){
        subdiv();
    }else{
        alert('hello world');
    }
});

有了这个,你可以在任何时候避免任何事情......

答案 3 :(得分:1)

Div标签没有正确附加到maindiv所以我创建了自己并阻止子标记调用父函数

&#13;
&#13;
function subdiv() {
  var p = document.getElementById('maindiv');
  var s = document.createElement('div');
  s.setAttribute('id', 'subdiv');
  s.setAttribute('onclick', 'return false;');
  p.appendChild(s);
  var s2 = document.getElementById('subdiv');
  s2.style.height = '100px';
  s2.style.width = '100px';
  s2.style.backgroundColor = 'green';
}

document.addEventListener('click', function() {
  alert('hello world');
});

$("#subdiv").on('click', function(e) {
  alert("subdiv");
  return false; //THIS WON'T CALL PARENT FUNCTION OR YOU CAN USE e.stopPropagation
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 200px;height:200px;padding:50px;background-color: lightcyan" id="maindiv" onclick="subdiv()">
  <div id="subdiv" style="height:100px;width:100px;background-color:green"></div>
</div>
&#13;
&#13;
&#13;