Question

我正在尝试将我的页面的innerHTML更改为我点击的元素的innerHTML，唯一的问题是我希望它采取整个元素，如：

<section class="homeItem" data-detail="{"ID":"8","Name":"MacBook Air","Description":"2015 MacBook A…"20","Price":"899","Photo":"Images/Products/macbookAir.png"}"></section>

而我用javascript编写的代码：

function selectedProduct(event){
  target = event.target;
  element = document.getElementById("test");
  element.innerHTML = target.innerHTML;
}

将定位我点击的特定元素。

我想要实现的是当我点击<section>元素中的任何位置时，它将采用整个元素的innerHTML而不是我点击的特定元素。

我认为这与选择被点击的元素的父元素有关，但我不确定并且无法在线找到任何内容。

如果可能的话，我想远离JQuery

Answer 1

我认为你需要的是使用event.currentTarget。这将包含实际具有事件侦听器的元素。因此，如果整个<section>的eventlistener event.target将是被点击的元素，则<section>将位于event.currentTarget。

否则parentNode可能就是你要找的东西。

link to currentTarget
link to parentNode

Answer 2

要使用元素的父级，请使用parentElement：

function selectedProduct(event){
  var target = event.target;
  var parent = target.parentElement;//parent of "target"
}

Answer 3

function getParent(event)
{
   return event.target.parentNode;
}

<强>示例：   1. document.body.addEventListener("click", getParent, false);返回您单击的当前元素的父元素。


如果你想在任何函数里面使用，那么传递你的事件并调用这样的函数：   function yourFunction(event){ var parentElement = getParent(event); }

Answer 4

    import java.io.IOException;
    import javax.servlet.Filter;
    import javax.servlet.FilterChain;
    import javax.servlet.FilterConfig;
    import javax.servlet.ServletException;
    import javax.servlet.ServletRequest;
    import javax.servlet.ServletResponse;
    import javax.servlet.http.HttpServletRequest;
    import org.apache.log4j.Logger;

    public class CrossScriptingFilter implements Filter {
    private static Logger logger = Logger.getLogger(CrossScriptingFilter.class);
    private FilterConfig filterConfig;

    public void init(FilterConfig filterConfig) throws ServletException {
        this.filterConfig = filterConfig;
    }

    public void destroy() {
        this.filterConfig = null;
    }

    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
        throws IOException, ServletException {
        System.out.println("In doFilter CrossScriptingFilter  ...............");
        chain.doFilter(new RequestWrapper((HttpServletRequest) request), response);
        System.out.println("Out doFilter CrossScriptingFilter ...............");
    }

    }

Answer 5

$(document).on("click", function(event){
   var a = $(event.target).parents();
   var flaghide = true;
    a.each(function(index, val){
       if(val == $(container)[0]){
           flaghide = false;
        }
    });
    if(flaghide == true){
        //required code
    }
})

Answer 6

var _RemoveBtn = document.getElementsByClassName("remove");
for(var i=0 ;  i<_RemoveBtn.length ; i++){
    _RemoveBtn[i].addEventListener('click',sample,false);
}
function sample(event){
    console.log(event.currentTarget.parentNode);    
}

你能使用event.target定位元素父元素吗？

6 个答案: